Questions:
N/D
Technical Refinement
Goal
The main objective is to allow the customers to use promo codes at checkout to receive benefits coming from offers.
Front-end refinement
...
From what we understand the current feature at checkout allow promo code just to type CBA offers and this feature is deprecated. More infos: https://rbidigital.slack.com/archives/C04FZ5HTH35/p1693855082030399.
As CBA feature is deprecated we need to change the promo code field to accept loyalty promo codes. (here more details on how to configure the promo code on sanity and voucherify: /wiki/spaces/CG/pages/984973325- OBS.: The documentation explain how configure promo codes to CBA offers and Loyalty Offers, So follow just the loyalty steps.)
After the config, we will have the config offer like this:
...
OBS.: On In-App Benefits there is just one item. If there are more itens, the discount will be the first item.
intl-whitelabel-app
1 - TASK: Create new promo code flow to loyalty
Create feature flag;
The first step to use the loyalty promo code at checkout will be to change the validation promo code flow.
On promo code component field, we will need to add a feature flag:
When this flag is enabled: The promo code flow will be LOYALTY OFFER
When this flag is disabled: The promo code flow will be CBA OFFER (current flow)
We will create a new hook to contain all the rules of this flow
We can use the same hook used to offer page flow.
intl-whitelabel-app/workspaces/frontend/src/state/loyalty/hooks/use-redeem-promo-codes.ts
...
title | Example code used in this hook to validate the promo code on backend |
---|
...
language | typescript |
---|
...
Questions:
N/D
Technical Refinement
Goal
The main objective is to allow the customers to use promo codes at checkout to receive benefits coming from offers.
Front-end refinement
...
From what we understand the current feature at checkout allow promo code just to type CBA offers and this feature is deprecated. More infos: https://rbidigital.slack.com/archives/C04FZ5HTH35/p1693855082030399.
As CBA feature is deprecated we need to change the promo code field to accept loyalty promo codes. (here more details on how to configure the promo code on sanity and voucherify: /wiki/spaces/CG/pages/984973325- OBS.: The documentation explain how configure promo codes to CBA offers and Loyalty Offers, So follow just the loyalty steps.)
After the config, we will have the config offer like this:
...
OBS.: On In-App Benefits there is just one item. If there are more itens, the discount will be the first item.
How to create a config offer and vinculate to a Voucherify voucher
...
intl-whitelabel-app
Acceptance criteria
We can’t impact the other markets
Apply promotional codes at checkout
Same as when the promo code is applied on the offers page
Validate the promotional code on voucherify
Use the current design of the promotional code field at checkout
We need to show only the input and the apply button when our new flag is ON (Task 3 for more details)
Layout proposed: https://rbidigital.slack.com/files/U042YV992Q2/F068QLFMVH9/image.png
https://rbidigital.slack.com/archives/C04T67F43C2/p1701795715126399
If the customer has a promo code saved on the offers page, we don’t validate the promo code on voucherify
When the checkout page is refreshed, the promo code should continue applied
The “apply promotional codes” would follow the sanity rules
When the customer uses the promo code, would hides from the offers page
This feature just works if the feature flag is enabled
Would be possible to apply the promo code on the offers page
If the promotional code is removed, must refresh page to request price order again.
Tasks:
Expand | |||||
---|---|---|---|---|---|
| |||||
|
Attention points:
We need to apply (dispatch) the personalised offer on some contexts:
actions.loyalty.setSelectedOffer(personalizedOffer)
actions.loyalty.setAppliedOffers
actions.loyalty.applyOffer
actions.loyalty.setCmsOffers
OBS.: It’s possible we need to apply the offer in another contexts too.
When we click on remove in offer info (after applied the offer), we need to remove the offer on all contexts.
When the customers reload the page, the offer must continue applied.
Verify need for other validations
With this update, the frontend is prepared to apply the promo code to loyalty.
...
2 - TASK: Updated action Remove button
We will need to update the button action to remove the applied offer on
loyalty.offers.cmsOffers
path:
intl-whitelabel-app/workspaces/frontend/src/state/global-state/models/loyalty/offers/offers.slice.ts
Code Block language typescript removeCmsOffers: (state, { payload }: PayloadAction<LoyaltyOffer>) => { state.cmsOffers = state.cmsOffers.filter(offer => offer._id !== payload._id); },
path:
intl-whitelabel-app/workspaces/frontend/src/pages/cart/your-cart/cart-offer.tsx
Code Block language typescript const onRemove = () => { ... dispatch(actions.loyalty.removeCmsOffers(selectedLoyaltyOffer)); };
OBS.: Change also:
path:
intl-whitelabel-app/workspaces/frontend/src/state/global-state/models/loyalty/loyalty.actions.ts
3 - TASK: Hide CBA Options
We will need to hide the CBA option to ensure that anything CBA option shows.
Then, we will create a new attribute to hide this option;
This attribute value can be the opposite of the value of feature flag (flag created on task 1)
4 - TASK: Apply discount again if not used
5 - TASK: Clean the applied offer when finished the order
When finished the order, we need to clean the offers on cookies, sessions and etc.
path:
intl-whitelabel-app/workspaces/frontend/src/pages/order-confirmation/order-confirmation.tsx
Expand | |||||
---|---|---|---|---|---|
| |||||
|
Back-end
After applying the Whitelabel will do a call to the backend to calculate the discount value:
...
How is the calculation done?
So basically, we need to send (via slack) to Winrest the offers sanityId.
They register these sanityId on their system and after that, always we use some offers with these sanityId registered, Winrest will return the calculation offers correctly.
Example:
To use the offer Test: Test Discount Offer (Sanity DEV)
We will need to send the sanityId:
a6f3eace-435e-49ea-9a79-e173f6172dcc
to Winrest via some means of communication this information;They will register this ID on their system;
When the intl-partners-service calls the Winrest API, the integration will know how much will be the discount;
The discount is always on the total value of the cart;
Solution proposal
Currently, we already sent the sanityId offer to the backend (
intl-partners-service
);Then, we need to send the discount information to Winrest;
With the
sanityId
that we have, we will find the discount values bygetOffers(sanityId: string)
path:
intl-partners-service/src/modules/orders/cart-total.service.ts
We will add a new attribute
orderDiscounts
on the webhook payload;We will send it to Winrest always in percentage (requested to Winrest, 'cause will be easier for them);
The
orderDiscounts
object would be in each cart object;If the discount is
amount
type, we will transform it topercentage
type;E.g: If the total cart is 10 euros and
amount
discount is 5 euros;We will calculate the discount:
Code Block discount = (100 * 5) / 100; discount = 50%;
So the payload will be:
Code Block language json "orderDiscounts": [ { "type": "percentage", "value": 50 } ]
Expand | |||||
---|---|---|---|---|---|
| |||||
The code above was developed in the PoC and is a new code. Attention points:
OBS.: It’s possible we need to apply the offer in another context too.
With this update, the frontend is prepared to apply the promo code to loyalty. |
Expand | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Expand | ||
---|---|---|
| ||
|
Expand | |||||
---|---|---|---|---|---|
| |||||
This task is not for now. We’ll develop a PoC and validate the ideas first
Important: We don’t have the POC to this task |
Expand | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||
This task was moved to another task This task was moved to another task as this objective conflicts with we’ll do in the
There is a feature flag that limits what kind of modal should be shown: With this flag on, we won’t have a close modal button like the one below: And when it’s turned on it will be shown as below:
|
intl-partners-service (backend)
After applying the Whitelabel will do a call to the backend to calculate the discount value:
...
How is the calculation done?
So basically, we need to send (via slack) to Winrest the offers sanityId.
They register these sanityId on their system and after that, always we use some offers with these sanityId registered, Winrest will return the calculation offers correctly.
Example:
To use the offer Test: Test Discount Offer (Sanity DEV)
We will need to send the sanityId:
a6f3eace-435e-49ea-9a79-e173f6172dcc
to Winrest via some means of communication this informationThey will register this ID on their system
When the intl-partners-service calls the Winrest API, the integration will know how much will be the discount
The discount is always on the total value of the cart
Solution proposal
Currently, we already sent the sanityId offer to the backend (
intl-partners-service
)Then, we need to send the discount information to Winrest
With the
sanityId
that we have, we will find the discount values bygetOffers(sanityId: string)
path:
intl-partners-service/src/modules/orders/cart-total.service.ts
We will add a new attribute
orderDiscounts
on the webhookIWebhookPriceOrder
payload
Acceptance criteria
We can’t impact the other markets
If there is an offer applied on the “input cart“, we need to send the discount to Winrest
Tasks:
Expand | |||||
---|---|---|---|---|---|
| |||||
|
Screenshots
N/A
POC
FRONTEND (WHITELABEL)
BACKEND (INTL-PARTNERS-SERVICE)
Impact Analysis
N/A
Dependencies
...