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.

...

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

...

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

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

...

...

...

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:

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

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

    let event = createRbiApplyPromoCodeEvent(promoCodeInput, 'FailedSuccessful', e.message);
    const personalizedOffer })=    await redeemMutation(user?.loyaltyId || '', promoCodeInput)
      .finallycatch((e: PromoCodeError) => {
        setPromoCodeValidationLoading(false);const reason = buildErrorMessageFromPromoCodeError(e)
      });  setPromoCodeErrorMessageId(
   trackEvent(event);      if (personalizedOfferreason as TPromoCodeErrorMessageIds) {|| PromoCodeErrorMessageIds.default
     await handleRedemption(personalizedOffer);  )

    // clear promo code input & error message
   logger.error(`Error validating promo code ${e}`)
   setPromoCodeErrorMessageId(null);     event = setPromoCodeInputcreateRbiApplyPromoCodeEvent(promoCodeInput, 'Failed', e.message);
       toast.success(formatMessage({ id: 'offerAddedToCart' }));
    }   }, [.finally(() => {
    formatMessage,    setPromoCodeValidationLoading(false)
handleRedemption,     promoCodeInput, })

  redeemMutation,     trackEvent,trackEvent(event)

   user?.loyaltyId, if  ](personalizedOffer); {
      await  useEffecthandleRedemption((personalizedOffer)
=>
  {    // if (appliedOfferPromoCode?.loyaltyEngineId) {
   clear promo code input & error message
  const standardOffersLimit =  setPromoCodeErrorMessageId(null)
      earningCalculationData?.EarningCalculation?.offerRedemptionLimits?.standardOffersLimit || 1;setPromoCodeInput('')

      toast.success(formatMessage({  dispatch(actions.loyalty.setSelectedOffer(appliedOfferPromoCode));id: 'offerAddedToCart' }))
    }
 dispatch(actions.loyalty.setAppliedOffers([appliedOfferPromoCode]));

 }, [
    formatMessage,
if (isDiscountLoyaltyOffer(appliedOfferPromoCode)) {  handleRedemption,
    promoCodeInput,
 // If limit ofredeemMutation,
offers reached remove the firsttrackEvent,
one    user?.loyaltyId,
  ])
  if
(appliedOffers?.length >= standardOffersLimit)
{   useEffect(() => {
    if removeFromCart({ cartId: appliedOffers[0].cartId });
(appliedOfferPromoCode?.loyaltyEngineId) {
      const }standardOffersLimit =
        //Discount offers should not show menu item details
        dispatch(earningCalculationData?.EarningCalculation?.offerRedemptionLimits?.standardOffersLimit || 1

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

      if (isDiscountLoyaltyOffer(appliedOfferPromoCode)) {
  id: appliedOfferPromoCode.loyaltyEngineId,     // If limit of offers reached remove the type: OfferType.GLOBAL,first one
        if (appliedOffers?.length >= standardOffersLimit) isStackable: appliedOfferPromoCode.isStackable,{
          removeFromCart({ cartId:  isSurprise: isSurpriseOffer(appliedOfferPromoCode),appliedOffers[0].cartId })
        }

   cmsId: appliedOfferPromoCode._id,    //Discount offers should not show menu item details
 cartId: 'discount-offer',       dispatch(
     })     actions.loyalty.applyOffer({
   );       }  id: appliedOfferPromoCode.loyaltyEngineId,
    dispatch(actions.loyalty.setCmsOffers([appliedOfferPromoCode]));       return; type: OfferType.GLOBAL,
  }      dispatch(actions.loyalty.setSelectedOffer(null));    isStackable: dispatch(actions.loyalty.setAppliedOffers([]));appliedOfferPromoCode.isStackable,
            dispatch(actions.loyalty.setCmsOffers([]));isSurprise: isSurpriseOffer(appliedOfferPromoCode),
        // eslint-disable-next-line react-hooks/exhaustive-deps   }, [appliedOfferPromoCode]);

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 contexts too.

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

   Image Removed

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

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

  Image Removed

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

      Image Removed

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.

...

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: 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 context too. When we click on remove in offer info (after applying the offer), we need to remove the offer in all contexts. Image Added 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 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. Image Added

...

...

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

    Code Block
    language typescript
    const onRemove = () => { ... dispatch(actions.loyalty.

• • removeCmsOffers(

• • selectedLoyaltyOffer))

Back-end

After applied the whitelabel will do a call to backend to calculate the discount value:

• First, it will call the PriceOrder mutation on intl-gateway or intl-graphql

  Image Removed

• This mutation will call the backend: intl-partners-service repository.

  • on this repository, will call:

    • public async price(@Body() payload: PriceOrderRequestDto): Promise<OrderResponseDto>

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

    • after: public async price(input: IPriceOrderRequest): Promise<IOrder>

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

      • on this file is where calculate the order and is generated the rbiOrderId.

• Setting up wrong offers;

• Missing configOffer calc;

intl-partners-service

• When the frontend call the backend, the first method ran is:

  • public async price(@Body() payload: PriceOrderRequestDto): Promise<OrderResponseDto>

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

  • after: public async price(input: IPriceOrderRequest): Promise<IOrder>

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

    • on this file is where calculate the order and is generated the rbiOrderId.

• On price(input: IPriceOrderRequest) on file orders.service.ts, there is a call method named this.cartTotalService.calculate(input.cart).

  • Inside this method is calc the some type offers, for example System Wide offers, but there isn’t the calc relative Offer configs.

    • The method that calc relative the system wide offer is getSystemWideOfferIncentiveDiscountAndType(offerId: string): Promise<IRewardIncentive | undefined>

      • path: @intl-sanity/loyalty/index.ts

getSystemWideOfferIncentiveDiscountAndType(offerId) {
    return this.reader.fetch(`
  *[_type == "systemwideOffer"
    && _id == $offerId
    && defined(incentives[_type == 'offerDiscount'][0])][0] {
      incentives[0]-> {
        discountType,
        discountValue
      }
    }
  `, { offerId });
}

• We will need to create a new method to get the config offers on intl-sanity repository:

  • path: intl-sanity/loyalty/index.ts

getLoyatyConfigOfferType(offerId) {
  return this.reader.fetch(`
  *[_type == "configOffer"
    && _id == $offerId
    && defined(incentives[_type == 'offerDiscount'][0])][0] {
      incentives[0]-> {
        discountType,
        discountValue
      }
    }
  `, { offerId });
}

• After it, we will need to update the intl-sanity lib on intl-partners-service to have access at this new query.

• In the next, we can do the new method to calc this type offer that can be after getSystemWideOfferIncentiveDiscountAndType method:

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

 /**
   * Calculates cart total.
   *
   * @param {ICart} cart Contents of the cart.
   * @returns {Promise<number>} A cart total.
   */
  public async calculate(cart: ICart): Promise<number> {
    // our base will be a simple sum of prices of all items
    let total = cart.cartEntries.reduce((sum: number, current: ICartEntry) => {
      if (current.price) {
        // even though we have price for entire item already we need to look for premium items which are not included
        const premiumItemsPrice = this.pricePremiumItems(current);
        return sum + current.price + premiumItemsPrice;
      }
      return sum + this.priceCartItem(current);
    }, 0);

    this.logger.debug({ total }, `Base total calculated`);

    // apply discount (we assume that there cannot be more than one)
    const discountEntry = cart.cartEntries.find(
      (entry: ICartEntry) => entry.type === CartEntryType.offerDiscount,
    );

    if (discountEntry) {
      const { sanityId } = discountEntry;

      const offer = await this.sanityLoyalty.getSystemWideOfferIncentiveDiscountAndType(sanityId);

      if (offer) {
        const { discountValue } = offer.incentives;
        this.logger.debug({ discountValue, sanityId }, 'Applying discount (system wide offer)');
        total = total - Math.round((total * discountValue) / 100);
      } else {
        this.logger.warn({ sanityId }, 'Offer not found in sanity');
      }
    }

    this.logger.info({ total }, 'Cart total calculated');

    return total;
  }

/**
   * Calculates cart total.
   *
   * @param {ICart} cart Contents of the cart.
   * @returns {Promise<number>} A cart total.
   */
  public async calculate(cart: ICart): Promise<ICart> {
    // apply discount (we assume that there cannot be more than one)
    const discountEntry = cart.cartEntries.find(
      (entry: ICartEntry) => entry.type === CartEntryType.offerDiscount,
    );
    
    const cartEntriesWithDiscount = cart.cartEntries.filter(
      (entry: ICartEntry) => entry.type !== CartEntryType.offerDiscount,
    );

    let offerSystemWide = {} as IRewardIncentive | undefined;
    let configOffer = {} as ILoyatyConfigOffer | undefined;

    if (discountEntry) {
      const { sanityId } = discountEntry;
      offerSystemWide = await this.sanityLoyalty.getSystemWideOfferIncentiveDiscountAndType(
        sanityId,
      );
      configOffer = await this.sanityLoyalty.getLoyatyConfigOfferType(sanityId);
    }

    const cartDiscounted = cart.cartEntries.map((cartEntrie: ICartEntry) => {
      if (cartEntrie.type === CartEntryType.offerDiscount) {
        return cartEntrie;
      }

      const discountPromo = offerSystemWide?.incentives || configOffer?.incentives;
      if (cartEntrie.price && discountPromo) {
        const { discountValue, discountType } = discountPromo;
        return {
          ...cartEntrie,
          price: this.calDiscount({
            description: offerSystemWide?.incentives
              ? '(system wide offer)'
              : configOffer?.incentives
              ? '(config offer)'
              : '',
            discountType,
            discountValue,
            length: cartEntriesWithDiscount.length,
            value: cartEntrie.price,
          }),
        };
      }
      return cartEntrie;
    });

    cart.cartEntries = cartDiscounted;

    // our base will be a simple sum of prices of all items
    const total = cart.cartEntries.reduce((sum: number, current: ICartEntry) => {
      if (current.type === CartEntryType.offerDiscount) {
        return sum;
      }

      if (current.price) {
        // even though we have price for entire item already we need to look for premium items which are not included
        const premiumItemsPrice = this.pricePremiumItems(current);
        return sum + current.price + premiumItemsPrice;
      }
      return sum + this.priceCartItem(current);
    }, 0);

    const cartUpdated = {
      ...cart,
      subTotalCents: total,
      totalCents: total,
    };

    return cartUpdated;
  }
  
  
  
  
private calDiscount({
    discountValue,
    discountType,
    value,
    length,
    description,
  }: {
    discountValue: number;
    discountType: string;
    value: number;
    length: number;
    description?: string;
  }): number {
    switch (discountType) {
      case 'amount':
        value = value - Math.round((discountValue * 100) / length);
        break;
      default:
        value = value - Math.round((value * discountValue) / 100);
        break;
    }
    this.logger.debug({ discountType, discountValue }, `Applied discount ${description}`);
    return value;
  }

...

Remembering that all these problems can occur because there is an error in the offer settings somewhere.

Expand
title 5 - TASK: Clean the applied offer when finished the order - MOVED TO ANOTHER 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 Jira Legacy server System JIRA serverId 255417eb-03fa-3e2f-a6ba-05d325fec50d key 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: Image Added And when it’s turned on it will be shown as below: Image Added 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 Code Block language typescript 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 Image Added 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 Image Added 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: Image Added 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

  Image Added

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

  Image Added

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

Expand
title 6 - TASK: Send to orderDiscount to Winrest
Create a feature flag in Tech Platform ENABLE_LOYALTY_OFFER_PROMOCODE_AT_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 get LaunchDarkly. Image Added In the line 328 we should validate flag ENABLE_AT_LOYALTY_OFFER_CHECKOUT Image AddedImage Added 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 Image Added Payload will be: Code Block language json { "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 } ] }

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-

  loyalty

  • send-

  promo

  • discount-

  code

  • offer-

  at

  • to-

  checkout

  • winrest

Impact Analysis

• N/A

Dependencies

...