Page Comparison

...

• Problems showed in the video above:

  • The offer was replaced without warning the user

  • In this case the two offers had the same title and subtitle (please disregard that).

  • The user needs to decide if he wants to replace the offer or not and the user need to know what will happen when he tried to user another promo code

...

From the design perspective we only need to decide who how this modal will be:

• Texts in general

• What buttons we’ll have

• We’ll show the close button (X at the top) or not?

• We’ll keep the same texts as we have at on the /offers page to keep the consistency?

...

Proposed changes:

• Create a new useState (inside the use-redeem-promo-code-checkout.ts) that will be used to show the modal or not

  • Our hook should return now this state

    

  • We’ll need to condition the showConfirmSwitchOffersDialog prop to consider our new state based if our flag is on (enableLoyaltyOfferPromoCodeAtCheckout)

    

• Create new methods that we’ll be used on onConfirmSwitchOffers and onCancelSwitchOffers props that already exists (cart-promo-codes.tsx, conditioned by our flag too). Our hook (use-redeem-promo-code-checkout.ts) should expose this too

  • For the onCancelSwitchOffers our internal logic will only set the state to show the replace modal to false and nothing more

  • For the onConfirmSwitchOffers the function that will be passed here will be responsible for the main logic: replace the offer. With that in mind:

    • Adjust the if state at applyOfferAtCheckout to:

      • Not call the removeFromCart directly

      • Here we set the modal replace (new state created at the first bullet) to true

      • Add a return statement below this state to prevent this code from running

      

    • Create a new function that will be used in the onConfirmSwitchOffers. There we can have the following logic:

      • First we apply the new offer at the cart

      • If the new offer was applied with success then we remove the old offer (the replaced one) using the removeFromCart that we removed/move from applyOfferAtCheckout. This is important because we can’t let the cart entries empty during the removal. This suggested order will ensure that

      • PS: It’s important to keep validate some things:

        • Check if the loading state is working accordingly during this new replace process

DOD-LIKE

• Follow the acceptance criteria and run some manual tests to guarantee that all is working as expected

• You can use new states if necessary but let’s avoid this if unnecessary

• Adjust/add new tests to the frontend/src/state/loyalty/hooks/tests/use-redeem-promo-code-checkout.test.ts