• Create a feature flag

  • ENABLE_AT_ATLOYALTYLOYALTY_OFFER__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:

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

2. When we click on remove in offer info (after applying the offer), we need to remove the offer in all contexts.

   

3. When the customers reload the page, the offer must continue applied.

4. Verify the need for other validations

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

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

      

• The component should be loaded in “expanded mode” ← To be validated with de Sousa Santos, Rodrigo

  • We can reuse the isExpanded property and use our flag to achieve this behavior

• Raphael Ferreira Gomes said that when the component is expanded some events are dispatched to mParticle. We need to validate what will happen if the component loads already expanded. He recommended that we need to talk with Manuel (Ramon Manuel Lucero) to understand if this will be a problem ← To be validate during development

  • Do we need to fire events if the component loads already expanded?

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

    Code Block
    language typescript
    const { sortedTilesAndOffers, marketingTileTop, marketingTileBottom } = useOffersPageMarketingTiles({ offers, offersPageMarketingTiles: marketingTiles, selectedOffer: selectedIncentive || null, })

  • On object sortedTilesAndOffers

    

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

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.

• 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

useEffect(() => {
  if (!loading && !orderErrors) {
    dispatch(actions.loyalty.setSelectedOffer(null))
    dispatch(actions.loyalty.setAppliedOffers([]))
    dispatch(actions.loyalty.setCmsOffers([]))
  }
}, [dispatch, loading, orderErrors])

• 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

• Create a feature flag in Tech Platform

  • ENABLE_AT_LOYALTY_OFFER_CHECKOUT

  • Set settings env, brand, marketing

Image Added

• Should enable SDK settings

  Image Added

• Update mapOrderDiscounts method to return the offer discount also.

  • path: intl-partners-service/src/modules/orders/orders.service.ts

  • Create function to getting LaunchDarkly.

    • Image Added

  • In the line 328 we should validate flag ENABLE_AT_LOYALTY_OFFER_CHECKOUT

    

  • To discover the discount values we will need to use the method getOffers

    • path: intl-partners-service/src/modules/orders/cart-total.service.ts

    • This method is private, so we will update it to public

  • After that, we will send the discount to Winrest via IWebhookPriceOrder adding the orderDiscounts

    

• Payload will be:

{
  "callbackUrl": "https://euw3-dev-plk-partners-api.rbictg.com/api/v1/orders/84b5f1df-28df-4e6f-a871-a2783602436f/price/callback",
  "cart": {
    "menuSelections": [
      {
        "externalReferenceId": "800853",
        "id": "f9f5b02e-bee8-4dd1-a5fa-222b79516a98",
        "menuSelections": [
          {
            "externalReferenceId": "800852",
            "id": "item_67167",
            "menuSelections": [],
            "price": {
              "amount": 679,
              "currency": "EUR"
            },
            "quantity": 1
          }
        ],
        "price": {
          "amount": 1100,
          "currency": "EUR"
        },
        "quantity": 1
      }
    ]
  },
  "channel": "WHITELABEL_IN_STORE",
  "fees": [],
  "id": "84b5f1df-28df-4e6f-a871-a2783602436f",
  "instructions": [],
  "serviceMode": "TAKEOUT",
  "storeId": "1111",
  "orderDiscounts": [
    {
      "type": "percentage", // or amount
      "value": 50
    }
  ]
}