Table of contents

Definition

❓ Open questions

Requirements

Problem statement

The white-label application lacks a corresponding flow to purchase additional ketchup, similar to the existing implementation in the AirTouch application.

The current process in AirTouch allows users to acquire extra ketchup beyond the free quantity specified in the Sanity configuration for each product. Users are required to pay for this additional ketchup if desired.

Furthermore, at the moment of adding the first product with ketchup to the cart, the application shows a screen that informs users about the "King Planet" initiative.

Following, the screenshots showing how it works on the Airtouch application:

How the feature work today:

After inserting the first hot product into the cart:

Card on the cart screen to add the extra ketchup:

Card to increase the number of ketchup packet and the info message:

Acceptance criteria

Sanity

• The configuration of the link between products and the quantity of ketchup should be accurately set up and managed within the Sanity CRM system.

• Don´t have limitation of quantity of ketchup.

• Users should have the option to acquire extra ketchups beyond the free quantity specified in the Sanity configuration for each product.

• The Ketchup configuration should include necessary details such as name, price, and availability.

• Any changes or updates to the ketchup product should be done by the Sanity application.

White-label

King planet

• The white-label application's functionality for purchasing additional ketchups and displaying the "King Planet" initiative screen should include a feature toggle.

• The feature toggle should allow enabling or disabling the functionality at runtime without requiring code changes or deployments.

• Disabling the feature toggle should disable the additional ketchup purchase flow and hide the "King Planet" initiative screen, ensuring they are not accessible to users.

• Enabling the feature toggle should make the additional ketchup purchase flow and "King Planet" initiative screen accessible and visible to users.

• The white-label application should introduce a flow that enables users to purchase additional ketchup, resembling the existing implementation in the AirTouch application.

• The white-label application should incorporate a screen that informs users about the "King Planet" initiative the moment they add the first product with ketchup to their cart.

• The "King Planet" initiative screen should provide a clear and concise description as described on the figma design.

• The inclusion of the "King Planet" initiative screen should not disrupt the overall flow of adding products to the cart and completing the checkout process.

• The white-label appear only in the first access in each order when the order already have some product with free ketchup available.

• The white-label allows to add 1 free ketchup in the order.

Purchase flow

• On the cart screen of the white-label application, a dedicated section should be available to display the ketchup and its corresponding cost.

• Within this section, users should have the option to add the ketchup to their cart for purchase.

• The cart screen should provide a clear overview of the total cost of the ketchup added, taking into account the quantity and individual prices.

• Once the user has finished adding ketchups to the cart, the flow to complete the order should follow the same process as the current implementation.

• Users should be able to edit the quantity of the ketchup they wish to buy, and the cost should update accordingly to reflect the changes.

• Users should have the option to acquire extra ketchup beyond the free quantity for each product specified in the Sanity configuration.

• The white-label application should accurately reflect the product configurations in Sanity, including the number of free ketchups and any associated pricing for additional ketchups.

• The purchasing flow for additional ketchups should be integrated with existent purchase flow.

• The white-label application should calculate and display the cost of additional ketchups when users choose to purchase them.

• Users should be prompted to pay for the additional ketchups during the checkout process, ensuring a smooth and transparent transaction.

• The additional ketchup purchase flow and the "King Planet" initiative screen should to ensure proper responsiveness and usability.

• Documentation should be provided, detailing the implementation and configuration of the additional ketchup purchase flow and the "King Planet" initiative screen in the white-label application.

• In the cart there is an automatic rule to move the paid ketchup to the free ketchup when the customer adds more items with free ketchup available

• When the customer removes products that reduce their amount of free ketchup, then in the cart there is an automatic rule to remove paid ketchups and free ketchups greater than the amount available. This rule is only applied when the customer has more than the free ketchup available at the time.

• There is no quantity limitation to add any quantity of the same product to the cart.

Success metrics

🤔 Assumptions

Solution

Scenarios

Scenario 1: xxx

Steps

Expected results

Do this

Expect that

Design

Figma design here: [insert link]

Development

Solution

The main idea of the solution was to reuse the existing /wiki/spaces/FE/pages/3497590902 feature and make something not tied only to the Ketchup idea. Our solution will able to the client offer any item to the user.

We also use the Addon Extras feature in the Bag With Handles solution. The Addon extras feature will solve for us the following:

• A modal that will hold all the extras items

• The edit of the extra item

• The re-order behavior (not letting the client open a re-order with an extra added directly)

• All the flow for the order, receipt, and so on, is already done

Requirements to work

We need to turn ON the following feature flags:

• Launchdarkly: intl-guest-app

  • enable-add-on-as-cart-item

  • enable-free-addon-on-cart

  • optional: enable-add-extras (if we want to show “+ Add extras” button in Your Cart section)

For this solution to work, we need to ensure that Sanity is properly configured:

• The creation of the desired Add On Section

Image Added

The sections here can be created and saved to be used later because they need to be added to the feature menu.

• Add the Add On Sections that we want to show in the cart into Feature Menu

Image Added

The order of the list defines the order that the sections will be shown on the cart checkout page.

• Configure the Add On Section correctly to have the behavior to deal with free items:

  • “Show as a separate section on cart” (ON)

  • “Make options in this section as free add-ons” (ON)

  • “Service Modes”

    • Here we’ll choose the desirable service modes that we want to offer the promotion

  • Image Added

    Configure the options (addons) for this Add On Section

    • Add the paid item (“Option”)

    • Add the free item (“Free Option”)

      • Important: the free item needs a PLU with zero price to have the correct behavior

    • Configure the “Menu options that Offer the Free Options Above”

  • Image Added

    Configure the “Free Add On Modal” fieldset if wants to show the promotional modal when the user enters the checkout page

    • “Show Free Add-On Modal at Checkout” → if ON we’ll have this modal shown in the cart

    • The image and description are optional. Title and CTA are required if the toggle is ON.

    Image Added

• To avoid quantity limits for the added items in cart we need to configure the following on Sanity:

  Image Added

In the example above the user can select only 20 items (individually) in the cart.

Image Added

This limit will also affect the addons items. Even if we offer 30 free items the user cannot select more than 20 items (in this example).

Front-end behaviors and Business rules