Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Problem statement

It was requested the ability to use a loyalty promo code through the checkout page. With that in mind, we extended the loyalty feature that before could only be used on /offers page.

The idea is to improve the user experience because the user now has the ability to add offers without the need to go back to the /offers page. The goal is to make it easier to redeem the offers, to ensure that customers perceive the value of this type of promotions. This will generate higher engagement / usage, and the end goal is to increase the overall order value, quantity and ultimately total revenue.

PS: This feature reused part of the deprecated/removed CBA Offers code. We are also using part of the loyalty offers logic to control the implementation.

...

How will the look and feel for Combo/Picker be after it is added to the cart

...

About the final price

As shown in the screenshot above, the Combo/Picker will not show what the discount was or a "discount value". Why?

  • Today our app doesn't have a discount at the item level

  • For the feature to work, we need to create an “Offer Combo” or “Offer Picker” on Sanity. This means that we always have an exclusive new item created for the promotion, and this item will already have the final price considering the promotion/discount

  • For the cart, total, subtotal, receipt, and email receipt, the prices will not show any different information about the offer

  • Important: when configuring the campaign platform (Voucherify, etc.), the type of discount in the coupon or the value of the coupon will not be used at all. The value for Combo/Picker will come from Sanity vendor configs. We can set 0 as value in the campaign platform.

PS: What can be different between Combo/Picker is the sub-items shown in the card. Sometimes the Picker will be converted as a single item and will not have any sub-items.

Videos demonstrations:

Expand

Adding a Combo Offer.mp4

Adding a Combo

Adding a Picker Offer.mp4

Adding an Offer Discount at checkout

...

About the final price

  • As shown in the screenshot above, the “Offer Discount” is not considered a "cart item" (as a product, for example). We can think of this as an "informative card"

  • The "Offer Discount" will have a discount applied to the final price of the cart (total cart). The type of discount can be “Amount” (absolute value discounted) or “Percentage”

    image-20240521-133738.pngImage Added

    image-20240527-132043.pngImage Added

    For the screenshot above we can imagine that we have a Offer Discount of 50% applied. The sum of prices and taxes will be something close to 20 but the final value will be half of that.

    PS: Please disregard if the values are not exact in the screenshot above, as this comes from a dev environment and we have some problems with value consistency. The important thing here is the idea/behavior.

  • Important: when configuring the campaign platform (Voucherify, etc.), we need to select the coupon to be a percentage or fixed value as well to ensure the correct behavior

How we’ll show the errors

...

Expand

Most of the behaviors will be equal to what we have on the /offers page. If we don’t know if something is a bug or not, we need to first check the behavior of the offer if we add it through the /offers page.

Partners integration and POS vendors

Expand

Integration by using sanity id

image-20240521-141817.pngImage Added

We need to ensure that the campaign platform will have the Loyalty Engine ID properly configured to match the configured offer (for Offer Discount or Combo/Picker).

Using Winrest as an example, they register these sanityId on their system. This is necessary for Winrest to calculate the total cart price correctly. For other vendors/POS this can also be used for integration. This can be done manually by sending the Id to the POS vendor, or you can also use the orderDiscount object that the Whitelabel App is already sending in the request (see below).

Integration using orderDiscount object

For this, we are using the IWebhookPriceOrder when we send the orderDiscounts property. With this property, the vendor/POS can get the offer information automatically and then make the calculation correct to return to the Whitelabel the correct value.

Payload example:

Code Block
languagejson
{
  "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
    }
  ]
}

For Combo/Picker what's the difference from what we have on the /offers page?

...

  • promoCodeOfferUnknownException: default error if the backend or campaign platform doesn't return a specific one. 

  • promoCodeOfferExpiredCode: for the expired code message

  • promoCodeOfferInvalidCode: for the invalid code message

  • promoCodeOfferRedeemedCode: for the already redeemed code

  • invalidOfferId: invalid offer id cunfigured configured in the offer message (for bad setup)

  • promoCodeAlreadyApplied: message when a code is already applied

...

Feature Flags

  • enable-edit-offer-added-at-checkout: to show or not the edit button in the offer item (for Combo/Picker)cart: general flag to control edit cart option

  • enable-offers-edit-cart: flag to turn on the edit button at offers cart items

  • enable-loyalty-offer-promo-code-at-checkout: a main flag to disable/enable the whole feature

  • enablePromoCodeAtCheckout: This is legacy flag that already exists and control the promo code besides our feature. Needs to be on too if we want the feature to be working

...