Modify Applied Coupon Code Copy and Hide Coupon Box (#93516)

* Hide coupon box and change coupon code Copy to Offer Applied

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 (
 		<CostOverridesListStyle>
 			<div className="cost-overrides-list-item cost-overrides-list-item--coupon">

client/my-sites/checkout/src/components/wp-checkout-order-review.tsx

@@ -9,13 +9,15 @@ 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';
 import { NON_PRIMARY_DOMAINS_TO_FREE_USERS } from 'calypso/state/current-user/constants';
 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;
 	}
 

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;

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;
+}