diff --git a/client/my-sites/checkout/src/components/cost-overrides-list.tsx b/client/my-sites/checkout/src/components/cost-overrides-list.tsx index 8cedce2a71105d..92b0c5d6cd294b 100644 --- a/client/my-sites/checkout/src/components/cost-overrides-list.tsx +++ b/client/my-sites/checkout/src/components/cost-overrides-list.tsx @@ -23,10 +23,11 @@ import { } from '@automattic/wpcom-checkout'; import styled from '@emotion/styled'; import { useTranslate } from 'i18n-calypso'; +import { useExperiment } from 'calypso/lib/explat'; import { useSelector } from 'calypso/state'; import { getIsOnboardingAffiliateFlow } from 'calypso/state/signup/flow/selectors'; import useCartKey from '../../use-cart-key'; -import { getAffiliateCouponLabel } from '../../utils'; +import { getAffiliateCouponLabel, getCouponLabel } from '../../utils'; import type { Theme } from '@automattic/composite-checkout'; import type { LineItemCostOverrideForDisplay } from '@automattic/wpcom-checkout'; @@ -323,17 +324,23 @@ export function CouponCostOverride( { const { formStatus } = useFormStatus(); const isDisabled = formStatus !== FormStatus.READY; const isOnboardingAffiliateFlow = useSelector( getIsOnboardingAffiliateFlow ); + const productSlugs = responseCart.products?.map( ( product ) => product.product_slug ); + const [ , experimentAssignment ] = useExperiment( 'calypso_checkout_hide_coupon_box', { + isEligible: ! productSlugs.some( ( slug ) => 'wp_difm_lite' === slug ), + } ); if ( ! responseCart.coupon || ! responseCart.coupon_savings_total_integer ) { return null; } // translators: The label of the coupon line item in checkout, including the coupon code + const couponLabel = translate( 'Coupon: %(couponCode)s', { + args: { couponCode: responseCart.coupon }, + } ); + const label = isOnboardingAffiliateFlow ? getAffiliateCouponLabel() - : translate( 'Coupon: %(couponCode)s', { - args: { couponCode: responseCart.coupon }, - } ); + : getCouponLabel( couponLabel as string, experimentAssignment?.variationName ); return (
diff --git a/client/my-sites/checkout/src/components/wp-checkout-order-review.tsx b/client/my-sites/checkout/src/components/wp-checkout-order-review.tsx index f6de57d615e59d..aed07f9aa13d13 100644 --- a/client/my-sites/checkout/src/components/wp-checkout-order-review.tsx +++ b/client/my-sites/checkout/src/components/wp-checkout-order-review.tsx @@ -9,6 +9,7 @@ import { styled, joinClasses } from '@automattic/wpcom-checkout'; import { useTranslate } from 'i18n-calypso'; import { useEffect, useCallback } from 'react'; import { hasP2PlusPlan } from 'calypso/lib/cart-values/cart-items'; +import { useExperiment } from 'calypso/lib/explat'; import useCartKey from 'calypso/my-sites/checkout/use-cart-key'; import { useSelector, useDispatch } from 'calypso/state'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; @@ -16,6 +17,7 @@ import { NON_PRIMARY_DOMAINS_TO_FREE_USERS } from 'calypso/state/current-user/co import { currentUserHasFlag, getCurrentUser } from 'calypso/state/current-user/selectors'; import { getIsOnboardingAffiliateFlow } from 'calypso/state/signup/flow/selectors'; import getSelectedSite from 'calypso/state/ui/selectors/get-selected-site'; +import { isCouponBoxHidden } from '../../utils'; import Coupon from './coupon'; import { WPOrderReviewLineItems, WPOrderReviewSection } from './wp-order-review-line-items'; import type { OnChangeItemVariant } from './item-variation-picker'; @@ -196,6 +198,9 @@ export function CouponFieldArea( { const translate = useTranslate(); const { setCouponFieldValue } = couponFieldStateProps; const isOnboardingAffiliateFlow = useSelector( getIsOnboardingAffiliateFlow ); + const cartKey = useCartKey(); + const { responseCart } = useShoppingCart( cartKey ); + const productSlugs = responseCart.products?.map( ( product ) => product.product_slug ); useEffect( () => { if ( couponStatus === 'applied' ) { @@ -204,7 +209,16 @@ export function CouponFieldArea( { } }, [ couponStatus, setCouponFieldValue ] ); - if ( isPurchaseFree || couponStatus === 'applied' || isOnboardingAffiliateFlow ) { + const [ , experimentAssignment ] = useExperiment( 'calypso_checkout_hide_coupon_box', { + isEligible: ! productSlugs.some( ( slug ) => 'wp_difm_lite' === slug ), + } ); + + if ( + isPurchaseFree || + couponStatus === 'applied' || + isOnboardingAffiliateFlow || + isCouponBoxHidden( productSlugs, experimentAssignment?.variationName ) + ) { return null; } diff --git a/client/my-sites/checkout/src/components/wp-order-review-line-items.tsx b/client/my-sites/checkout/src/components/wp-order-review-line-items.tsx index e01e05427cad45..85e60ccdda7672 100644 --- a/client/my-sites/checkout/src/components/wp-order-review-line-items.tsx +++ b/client/my-sites/checkout/src/components/wp-order-review-line-items.tsx @@ -20,13 +20,14 @@ import { import styled from '@emotion/styled'; import { useState, useCallback, useMemo } from 'react'; import { has100YearPlan } from 'calypso/lib/cart-values/cart-items'; +import { useExperiment } from 'calypso/lib/explat'; import { isWcMobileApp } from 'calypso/lib/mobile-app'; import { useGetProductVariants } from 'calypso/my-sites/checkout/src/hooks/product-variants'; import { getSignupCompleteFlowName } from 'calypso/signup/storageUtils'; import { useDispatch, useSelector } from 'calypso/state'; import { recordTracksEvent } from 'calypso/state/analytics/actions'; import { getIsOnboardingAffiliateFlow } from 'calypso/state/signup/flow/selectors'; -import { getAffiliateCouponLabel } from '../../utils'; +import { getAffiliateCouponLabel, getCouponLabel, isCouponBoxHidden } from '../../utils'; import { AkismetProQuantityDropDown } from './akismet-pro-quantity-dropdown'; import { ItemVariationPicker } from './item-variation-picker'; import type { OnChangeAkProQuantity } from './akismet-pro-quantity-dropdown'; @@ -93,8 +94,18 @@ export function WPOrderReviewLineItems( { const creditsLineItem = getCreditsLineItemFromCart( responseCart ); const couponLineItem = getCouponLineItemFromCart( responseCart ); const isOnboardingAffiliateFlow = useSelector( getIsOnboardingAffiliateFlow ); - if ( isOnboardingAffiliateFlow && couponLineItem ) { - couponLineItem.label = getAffiliateCouponLabel(); + const productSlugs = responseCart.products?.map( ( product ) => product.product_slug ); + const [ , experimentAssignment ] = useExperiment( 'calypso_checkout_hide_coupon_box', { + isEligible: ! productSlugs.some( ( slug ) => 'wp_difm_lite' === slug ), + } ); + + if ( couponLineItem ) { + couponLineItem.label = isOnboardingAffiliateFlow + ? getAffiliateCouponLabel() + : getCouponLabel( couponLineItem.label, experimentAssignment?.variationName ); + if ( isCouponBoxHidden( productSlugs, experimentAssignment?.variationName ) ) { + couponLineItem.hasDeleteButton = false; + } } const { formStatus } = useFormStatus(); const isDisabled = formStatus !== FormStatus.READY; diff --git a/client/my-sites/checkout/utils.ts b/client/my-sites/checkout/utils.ts index 76a39e05f1498b..9a227e3d0f53b5 100644 --- a/client/my-sites/checkout/utils.ts +++ b/client/my-sites/checkout/utils.ts @@ -135,3 +135,24 @@ export function getAffiliateCouponLabel(): string { // translators: The label of the coupon line item in checkout return translate( 'Exclusive Offer Applied' ); } + +export function getCouponLabel( + originalLabel: string, + experimentVariationName: string | null | undefined +): string { + return experimentVariationName === 'treatment' ? translate( 'Offer Applied' ) : originalLabel; +} + +export function isCouponBoxHidden( + productSlugs: string[], + experimentVariationName: string | null | undefined +): boolean { + const ignoredProductSlugs = [ 'wp_difm_lite' ]; + const containsIgnoredProduct = productSlugs.some( ( slug ) => + ignoredProductSlugs.includes( slug ) + ); + if ( containsIgnoredProduct ) { + return false; + } + return experimentVariationName === 'treatment' ? true : false; +}