composite-checkout: Hide coupon field behind button (#42776)

* Remove unused variantRequestStatus prop * Add missing PropTypes to WPCheckoutOrderReview * Hide coupon field in review step behind button * Clear coupon field and hide when coupon is removed * Update styles and add copy Co-authored-by: fditrapani <filippo.di.trapani@a8c.com>
Automattic · May 29, 2020 · d77bf4f · d77bf4f
1 parent 7d4846c
commit d77bf4f
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 25 deletions.
diff --git a/client/my-sites/checkout/composite-checkout/composite-checkout.js b/client/my-sites/checkout/composite-checkout/composite-checkout.js
@@ -219,7 +219,6 @@ export default function CompositeCheckout( {
 		isLoading: isLoadingCart,
 		isPendingUpdate: isCartPendingUpdate,
 		allowedPaymentMethods: serverAllowedPaymentMethods,
-		variantRequestStatus,
 		variantSelectOverride,
 		responseCart,
 		addItem,
@@ -552,7 +551,6 @@ export default function CompositeCheckout( {
 					countriesList={ countriesList }
 					StateSelect={ StateSelect }
 					renderDomainContactFields={ renderDomainContactFields }
-					variantRequestStatus={ variantRequestStatus }
 					variantSelectOverride={ variantSelectOverride }
 					getItemVariants={ getItemVariants }
 					domainContactValidationCallback={ domainContactValidationCallback }

diff --git a/client/my-sites/checkout/composite-checkout/wpcom/components/item-variation-picker.tsx b/client/my-sites/checkout/composite-checkout/wpcom/components/item-variation-picker.tsx
@@ -10,7 +10,6 @@ import { useTranslate } from 'i18n-calypso';
  */
 import { WPCOMCartItem } from '../types';
 import RadioButton from './radio-button';
-import { VariantRequestStatus } from '../hooks/use-shopping-cart';
 
 export type WPCOMProductSlug = string;
 
@@ -23,7 +22,6 @@ export type WPCOMProductVariant = {
 
 export type ItemVariationPickerProps = {
 	selectedItem: WPCOMCartItem;
-	variantRequestStatus: VariantRequestStatus;
 	variantSelectOverride: { uuid: string; overrideSelectedProductSlug: string }[];
 	getItemVariants: ( arg0: WPCOMProductSlug ) => WPCOMProductVariant[];
 	onChangeItemVariant: ( arg0: string, arg1: WPCOMProductSlug, arg2: number ) => void;

diff --git a/client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout-order-review.js b/client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout-order-review.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useLineItems, useFormStatus } from '@automattic/composite-checkout';
@@ -21,19 +21,23 @@ export default function WPCheckoutOrderReview( {
 	removeCoupon,
 	couponStatus,
 	couponFieldStateProps,
-	variantRequestStatus,
 	variantSelectOverride,
 	getItemVariants,
 	onChangePlanLength,
 	siteUrl,
 } ) {
 	const translate = useTranslate();
 	const [ items, total ] = useLineItems();
-	const { formStatus } = useFormStatus();
+	const [ isCouponFieldVisible, setCouponFieldVisible ] = useState( false );
 	const isPurchaseFree = total.amount.value === 0;
 
 	const firstDomainItem = items.find( isLineItemADomain );
 	const domainUrl = firstDomainItem ? firstDomainItem.label : siteUrl;
+	const removeCouponAndClearField = ( uuid ) => {
+		removeCoupon( uuid );
+		couponFieldStateProps.setCouponFieldValue( '' );
+		setCouponFieldVisible( false );
+	};
 
 	return (
 		<div className={ joinClasses( [ className, 'checkout-review-order' ] ) }>
@@ -43,23 +47,21 @@ export default function WPCheckoutOrderReview( {
 				<WPOrderReviewLineItems
 					items={ items }
 					removeItem={ removeItem }
-					removeCoupon={ removeCoupon }
-					variantRequestStatus={ variantRequestStatus }
+					removeCoupon={ removeCouponAndClearField }
 					variantSelectOverride={ variantSelectOverride }
 					getItemVariants={ getItemVariants }
 					onChangePlanLength={ onChangePlanLength }
 					couponStatus={ couponStatus }
 				/>
 			</WPOrderReviewSection>
 
-			{ ! isPurchaseFree && (
-				<CouponField
-					id="order-review-coupon"
-					disabled={ formStatus !== 'ready' }
-					couponStatus={ couponStatus }
-					couponFieldStateProps={ couponFieldStateProps }
-				/>
-			) }
+			<CouponFieldArea
+				isCouponFieldVisible={ isCouponFieldVisible }
+				setCouponFieldVisible={ setCouponFieldVisible }
+				isPurchaseFree={ isPurchaseFree }
+				couponStatus={ couponStatus }
+				couponFieldStateProps={ couponFieldStateProps }
+			/>
 		</div>
 	);
 }
@@ -72,16 +74,69 @@ WPCheckoutOrderReview.propTypes = {
 	getItemVariants: PropTypes.func,
 	onChangePlanLength: PropTypes.func,
 	siteUrl: PropTypes.string,
+	couponStatus: PropTypes.string,
+	couponFieldStateProps: PropTypes.object,
+	variantSelectOverride: PropTypes.object,
 };
 
+function CouponFieldArea( {
+	isCouponFieldVisible,
+	setCouponFieldVisible,
+	isPurchaseFree,
+	couponStatus,
+	couponFieldStateProps,
+} ) {
+	const { formStatus } = useFormStatus();
+	const translate = useTranslate();
+
+	if ( isPurchaseFree ) {
+		return null;
+	}
+
+	if ( isCouponFieldVisible ) {
+		return (
+			<CouponField
+				id="order-review-coupon"
+				disabled={ formStatus !== 'ready' }
+				couponStatus={ couponStatus }
+				couponFieldStateProps={ couponFieldStateProps }
+			/>
+		);
+	}
+
+	return (
+		<CouponLinkWrapper>
+			{ translate( 'Have a coupon? ' ) }
+			<CouponEnableButton onClick={ () => setCouponFieldVisible( true ) }>
+				{ translate( 'Add a coupon code' ) }
+			</CouponEnableButton>
+		</CouponLinkWrapper>
+	);
+}
+
 const DomainURL = styled.div`
-	color: ${ ( props ) => props.theme.colors.textColorLight };
+	color: ${( props ) => props.theme.colors.textColorLight};
 	font-size: 14px;
 	margin-top: -10px;
 	word-break: break-word;
 `;
 
+const CouponLinkWrapper = styled.div`
+	font-size: 14px;
+`;
+
 const CouponField = styled( Coupon )`
 	margin: 20px 30px 0 0;
-	border-bottom: 1px solid ${ ( props ) => props.theme.colors.borderColorLight };
+	border-bottom: 1px solid ${( props ) => props.theme.colors.borderColorLight};
+`;
+
+const CouponEnableButton = styled.button`
+	cursor: pointer;
+	text-decoration: underline;
+	color: ${( props ) => props.theme.colors.highlight};
+	font-size: 14px;
+
+	:hover {
+		text-decoration: none;
+	}
 `;
diff --git a/client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout.js b/client/my-sites/checkout/composite-checkout/wpcom/components/wp-checkout.js
@@ -84,7 +84,6 @@ export default function WPCheckout( {
 	countriesList,
 	StateSelect,
 	renderDomainContactFields,
-	variantRequestStatus,
 	variantSelectOverride,
 	getItemVariants,
 	domainContactValidationCallback,
@@ -201,7 +200,6 @@ export default function WPCheckout( {
 							couponFieldStateProps={ couponFieldStateProps }
 							removeCoupon={ removeCouponAndResetActiveStep }
 							onChangePlanLength={ changePlanLength }
-							variantRequestStatus={ variantRequestStatus }
 							variantSelectOverride={ variantSelectOverride }
 							getItemVariants={ getItemVariants }
 							siteUrl={ siteUrl }

diff --git a/client/my-sites/checkout/composite-checkout/wpcom/components/wp-order-review-line-items.js b/client/my-sites/checkout/composite-checkout/wpcom/components/wp-order-review-line-items.js
@@ -33,7 +33,6 @@ function WPLineItem( {
 	className,
 	hasDeleteButton,
 	removeItem,
-	variantRequestStatus,
 	variantSelectOverride,
 	getItemVariants,
 	onChangePlanLength,
@@ -147,7 +146,6 @@ function WPLineItem( {
 			{ shouldShowVariantSelector && (
 				<ItemVariationPicker
 					selectedItem={ item }
-					variantRequestStatus={ variantRequestStatus }
 					variantSelectOverride={ variantSelectOverride }
 					getItemVariants={ getItemVariants }
 					onChangeItemVariant={ onChangePlanLength }
@@ -290,7 +288,6 @@ export function WPOrderReviewLineItems( {
 	isSummaryVisible,
 	removeItem,
 	removeCoupon,
-	variantRequestStatus,
 	variantSelectOverride,
 	getItemVariants,
 	onChangePlanLength,
@@ -307,7 +304,6 @@ export function WPOrderReviewLineItems( {
 							item={ item }
 							hasDeleteButton={ canItemBeDeleted( item ) }
 							removeItem={ item.type === 'coupon' ? removeCoupon : removeItem }
-							variantRequestStatus={ variantRequestStatus }
 							variantSelectOverride={ variantSelectOverride }
 							getItemVariants={ getItemVariants }
 							onChangePlanLength={ onChangePlanLength }