Versions Compared

Old Version 56

changes.mady.by.user Augusto de Souza, Jonatan (Deactivated)

Saved on

compared with

New Version 57

changes.mady.by.user Raphael Ferreira Gomes

Saved on

Key

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

Questions:

...

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

    • Hide the link “View saved promotional“

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

...

Expand
title1 - TASK: Apply a promo code flow for loyalty

  • Create a feature flag;

  • The first step to use the loyalty promo code at checkout will be to change the validation promo code flow.

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

Code Block
languagetypescript
const onSubmitLoyaltyPromoCode = useCallback(async () => {
    setPromoCodeValidationLoading(true);

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

    let event = createRbiApplyPromoCodeEvent(promoCodeInput, 'Successful');
    const personalizedOffer = await redeemMutation(user?.loyaltyId || '', promoCodeInput)
      .catch((e: PromoCodeError) => {
        const reason = buildErrorMessageFromPromoCodeError(e);
        setPromoCodeErrorMessageId(
          (reason as TPromoCodeErrorMessageIds) || PromoCodeErrorMessageIds.default
        );

        logger.error(`Error validating promo code ${e}`);
        event = createRbiApplyPromoCodeEvent(promoCodeInput, 'Failed', e.message);
      })
      .finally(() => {
        setPromoCodeValidationLoading(false);
      });

    trackEvent(event);

    if (personalizedOffer) {
      await handleRedemption(personalizedOffer);

      // clear promo code input & error message
      setPromoCodeErrorMessageId(null);
      setPromoCodeInput('');

      toast.success(formatMessage({ id: 'offerAddedToCart' }));
    }
  }, [
    formatMessage,
    handleRedemption,
    promoCodeInput,
    redeemMutation,
    trackEvent,
    user?.loyaltyId,
  ]);
  
  
   useEffect(() => {
    if (appliedOfferPromoCode?.loyaltyEngineId) {
      const standardOffersLimit =
        earningCalculationData?.EarningCalculation?.offerRedemptionLimits?.standardOffersLimit || 1;

      dispatch(actions.loyalty.setSelectedOffer(appliedOfferPromoCode));
      dispatch(actions.loyalty.setAppliedOffers([appliedOfferPromoCode]));

      if (isDiscountLoyaltyOffer(appliedOfferPromoCode)) {
        // If limit of offers reached remove the first one
        if (appliedOffers?.length >= standardOffersLimit) {
          removeFromCart({ cartId: appliedOffers[0].cartId });
        }

        //Discount offers should not show menu item details
        dispatch(
          actions.loyalty.applyOffer({
            id: appliedOfferPromoCode.loyaltyEngineId,
            type: OfferType.GLOBAL,
            isStackable: appliedOfferPromoCode.isStackable,
            isSurprise: isSurpriseOffer(appliedOfferPromoCode),
            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]);

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

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

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

  3. Verify the need for other validations

With this update, the frontend is prepared to apply the promo code to loyalty.

...