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: https://rbictg.atlassian.net/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:

Create a feature flag
- ENABLE_LOYALTY_OFFER_PROMO_CODE_AT_CHECKOUT
The first step to use the loyalty promo code at checkout will be to change the validation promo code flow.
- On the 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)
Where the new logic can be (two options):
- A new hook to contain all the rules of this flow
  - The should be in app/workspaces/frontend/src/state/loyalty/hooks/use-redeem-promo-code-checkout
- 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

const onSubmitLoyaltyPromoCode = useCallback(async () => {
    setPromoCodeValidationLoading(true)

    // const loyaltyId = 'ec5cec01-b41b-509b-9111-310ab5a18154'

    let event = createRbiApplyPromoCodeEvent(promoCodeInput, 'Successful')
    const personalizedOffer = await redeemMutation(user?.loyaltyId || '', promoCodeInput)
      .catch((e: PromoCodeError) => {
        const reason = buildErrorMessageFromPromoCodeError(e)
        setPromoCodeErrorMessageId(
          (reason as TPromoCodeErrorMessageIds) || PromoCodeErrorMessageIds.default
        )

        logger.error(`Error validating promo code ${e}`)
        event = createRbiApplyPromoCodeEvent(promoCodeInput, 'Failed', e.message)
      })
      .finally(() => {
        setPromoCodeValidationLoading(false)
      })

    trackEvent(event)

    if (personalizedOffer) {
      await handleRedemption(personalizedOffer)

      // clear promo code input & error message
      setPromoCodeErrorMessageId(null)
      setPromoCodeInput('')

      toast.success(formatMessage({ id: 'offerAddedToCart' }))
    }
  }, [
    formatMessage,
    handleRedemption,
    promoCodeInput,
    redeemMutation,
    trackEvent,
    user?.loyaltyId,
  ])
  
  
   useEffect(() => {
    if (appliedOfferPromoCode?.loyaltyEngineId) {
      const standardOffersLimit =
        earningCalculationData?.EarningCalculation?.offerRedemptionLimits?.standardOffersLimit || 1

      dispatch(actions.loyalty.setSelectedOffer(appliedOfferPromoCode))
      dispatch(actions.loyalty.setAppliedOffers([appliedOfferPromoCode]))

      if (isDiscountLoyaltyOffer(appliedOfferPromoCode)) {
        // If limit of offers reached remove the first one
        if (appliedOffers?.length >= standardOffersLimit) {
          removeFromCart({ cartId: appliedOffers[0].cartId })
        }

        //Discount offers should not show menu item details
        dispatch(
          actions.loyalty.applyOffer({
            id: appliedOfferPromoCode.loyaltyEngineId,
            type: OfferType.GLOBAL,
            isStackable: appliedOfferPromoCode.isStackable,
            isSurprise: isSurpriseOffer(appliedOfferPromoCode),
            cmsId: appliedOfferPromoCode._id,
            cartId: 'discount-offer',
          })
        )
      }

      dispatch(actions.loyalty.setCmsOffers([appliedOfferPromoCode]))
      return
    }

    dispatch(actions.loyalty.setSelectedOffer(null))
    dispatch(actions.loyalty.setAppliedOffers([]))
    dispatch(actions.loyalty.setCmsOffers([]))

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [appliedOfferPromoCode])

The code above was developed in the PoC and is a new code.

Attention points:

We need to apply (dispatch) the personalised offer on some contexts:
1. actions.loyalty.setSelectedOffer(personalizedOffer)
2. actions.loyalty.setAppliedOffers
3. actions.loyalty.applyOffer
4. actions.loyalty.setCmsOffers

OBS.: It’s possible we need to apply the offer in another context too.

When we click on remove in offer info (after applying the offer), we need to remove the offer in all contexts.
When the customers reload the page, the offer must continue applied.
Verify the need for other validations
If the user is not authenticated we need to ask for the login
1. The behavior will be the same as we have on offers page

With this update, the frontend is prepared to apply the promo code to loyalty.

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
  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
  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

We need to render only the input for the promotional code instead of the collapse structure if our flag is ON
- Before
- After our change (with our flag ON)
@Raphael Ferreira Gomes said that when the component is expanded some events are dispatched to mParticle. We need to validate what will happen now that the component will be loaded in the screen without the collapse. He recommended that we need to talk with Manuel (Manuel Rodrigues da Silva) to understand if this will be a problem and what’s expect for the events part ← To be validate during development
- Do we need to fire events if the component is already rendered in the screen?

This task is not for now. We’ll develop a PoC and validate the ideas first

Currently, we don’t have the validated voucher flow on whitelabel-app and voucherify, Just the burn voucher flow when we applied the promo code.
When we applied the promo code, the offer get saved on the offers page.
- So, We need to validate the offers saved and compare the promo code added on the field to offers saved before validating the promo code on voucherify.
  - If we have a promo code saved, we will apply the offer without validating voucherify.
  - If we don’t have one, we will validate the promo code with voucherify
When have the promo code information on file:
- path: intl-whitelabel-app/workspaces/frontend/src/pages/loyalty/loyalty-offers/loyalty-offers.tsx
- On object sortedTilesAndOffers

Important: We don’t have the POC to this task

This task was moved to another task

This task was moved to another task as this objective conflicts with we’ll do in the https://rbictg.atlassian.net/browse/IBFEC-1419

Important (BLOCKED): apparently this flow changed in the current app and the result was not what Rodrigo showed in the screenshots below (redeem in restaurant modal). We don’t have enough time during the A&D to go deep on this. We can talk with @de Sousa Santos, Rodrigo to understand better what code we should base in.

There is a feature flag that limits what kind of modal should be shown: ENABLE_IMPROVED_SIMPLIFIED_REDEEM_IN_RESTAURANT_STATIC_OFFERS

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:

When finish the order, we need to clean the offers on cookies, sessions, etc.
- path: intl-whitelabel-app/workspaces/frontend/src/pages/order-confirmation/order-confirmation.tsx
- Suggestion of PoC code: Instead of clear each state using a set function (showed in the PoC code below) we can improve this creating new slices to handle with the data clear:
  - selectedOffer state → We can create a new slice to clear/reset this state
  - appliedOffers state → We can reuse the resetAppliedOffers() slice that already exists to clear/reset this state instead of set an empty array
  - cmsOffers state → We can create a new slice to clear/reset this state
  - As last resource we can create a new slice to clear all the data related to the applied offer

After the order is finished, we need to apply the sanity rules too, for example:
- If the number used voucher is 1, after the order, the offer should be removed from the offer page
- we can use the same logic on the component OfferRedemptionModal
  - path: intl-whitelabel-app/workspaces/frontend/src/components/offer-redemption-modal/index.tsx
  - When we click on Redeem in Restaurant
  - Will show the modal and if we click on the close button, the offers will removed on the offer page. So we can use the same logic:
- OBS: This relation between offer x customer, probably is saved on dynamoBD
  - We can find the answer on intl-promotion-service repository, from redeemCoupon method flow

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)

URL: https://dev-plk-es-whitelabel-cms.rbi.tools/desk/orderLevelContentloyaltyincentivesoffersconfigOffersa6f3eace-435e-49ea-9a79-e173f6172dcc
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 by getOffers(sanityId: string)
  - path: intl-partners-service/src/modules/orders/cart-total.service.ts
We will add a new attribute orderDiscounts on the webhook IWebhookPriceOrder 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:

Screenshots

N/A

POC

FRONTEND (WHITELABEL)
- Branch POC: https://github.com/rbilabs/intl-whitelabel-app/tree/poc/IBFEC-934-loyalty-promo-code-at-checkout
BACKEND (INTL-PARTNERS-SERVICE)
- Branch POC: https://github.com/rbilabs/intl-partners-service/tree/poc/IBFEC-934-send-discount-offer-to-winrest

Impact Analysis

N/A

Dependencies

N/A

Unit Test

N/A

Useful Links

N/A

Iberia Collaboration

Technical refinement - Discount codes at checkout

Analytics

Questions:

Technical Refinement

Goal

Front-end refinement

intl-whitelabel-app

Acceptance criteria

Tasks:

Attention points:

intl-partners-service (backend)

How is the calculation done?

Solution proposal

Acceptance criteria

Tasks:

Screenshots

POC

Impact Analysis

Dependencies

Unit Test

Useful Links

Related content