...

• 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 on the /offers page to keep the consistency?

How will be the design solution

• We’ll adjust the title of the modal that already exists at checkout to be equal to the legacy /offers modal

• We’ll adjust the legacy /offers modal to show the yes/no button to be equal to the modal that we have on the cart page

• We’ll adjust the legacy /offers modal to not show the X close button at the top to be equal to the modal that we have on the cart page

...

Acceptance criteria

• If the user wants to apply a new offer after already having one applied to the cart, we need to show a modal asking for permission to replace the current offer

• If the user clicks at yes/confirm we should replace the current offer with the new one added

• If the user clicks in no/cancel/X at the top we should do nothing. We’ll only close the modal, and the current offer will remain added to the cart as before

• If the user is at the cart in a scenario where he only has the offer at the cart entry (without other items/products) we need to ensure that the user will stay at the cart during the replacement process

• Respect the design UI defined above. This was validated/approved by the design team

...

Tech refinement breakdown

...

• 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 validate some things:

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

• Adjust the legacy /offers legacy modal to have the yes/no button and hide the X button at the top

• Adjust the title of the checkout modal to be equal the legacy /offers modal

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