Address review

Automattic · Sep 10, 2024 · 0a37efc · 0a37efc
1 parent e10c1e0
commit 0a37efc
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 74 deletions.
diff --git a/client/me/purchases/cancel-purchase/feature-list.jsx b/client/me/purchases/cancel-purchase/feature-list.jsx
@@ -1,7 +1,7 @@
 import { getFeatureByKey } from '@automattic/calypso-products'; // eslint-disable-line import/named
 import { Gridicon } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
-import { getName } from 'calypso/lib/purchases';
+import { getName, isRefundable } from 'calypso/lib/purchases';
 
 const CancelPurchaseFeatureList = ( { purchase, cancellationFeatures } ) => {
 	const translate = useTranslate();
@@ -13,14 +13,23 @@ const CancelPurchaseFeatureList = ( { purchase, cancellationFeatures } ) => {
 	return (
 		<div className="cancel-purchase__features">
 			<p>
-				{ translate(
-					'By canceling the %(productName)s plan, these features will no longer be available on your site:',
-					{
-						args: {
-							productName: getName( purchase ),
-						},
-					}
-				) }
+				{ isRefundable( purchase )
+					? translate(
+							'By canceling the %(productName)s plan, these features will no longer be available on your site:',
+							{
+								args: {
+									productName: getName( purchase ),
+								},
+							}
+					  )
+					: translate(
+							'These features will no longer be available on your site when your %(productName)s plan expires:',
+							{
+								args: {
+									productName: getName( purchase ),
+								},
+							}
+					  ) }
 			</p>
 			<ul className="cancel-purchase__features-list">
 				{ cancellationFeatures.map( ( feature ) => {

diff --git a/client/me/purchases/cancel-purchase/index.jsx b/client/me/purchases/cancel-purchase/index.jsx
@@ -322,7 +322,7 @@ class CancelPurchase extends Component {
 				</div>
 
 				<FormattedHeader
-					className="cancel-purchase__formatter-header"
+					className="cancel-purchase__formatted-header"
 					brandFont
 					headerText={ heading }
 					align="left"

diff --git a/client/me/purchases/cancel-purchase/style.scss b/client/me/purchases/cancel-purchase/style.scss
@@ -1,7 +1,8 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
-.is-section-me.is-global-sidebar-visible .purchases__cancel.main {
+.is-section-me.is-global-sidebar-visible .purchases__cancel.main,
+.is-section-me.is-global-sidebar-visible .purchases__cancel-domain.main {
 	height: calc(100vh - var(--masterbar-height) - var(--content-padding-top) - var(--content-padding-bottom));
 }
 
@@ -15,7 +16,8 @@
 	}
 }
 
-.cancel-purchase__back .header-cake__back {
+.cancel-purchase__back .header-cake__back,
+.confirm-cancel-domain__back .header-cake__back {
 	padding: 24px 0;
 	text-align: left;
 }
@@ -80,7 +82,8 @@
 	}
 }
 
-.cancel-purchase__formatter-header.formatted-header {
+.confirm-cancel-domain__formatted-header.formatted-header,
+.cancel-purchase__formatted-header.formatted-header {
 	margin: 16px 0;
 }
 
@@ -158,21 +161,24 @@
 }
 
 .cancel-purchase__footer {
-	align-items: baseline;
+	align-items: center;
 	display: flex;
-	flex-wrap: wrap;
 	justify-content: space-between;
 	gap: 8px;
 
+	.cancel-purchase__footer-text {
+		flex-grow: 1;
+	}
+
+	.cancel-purchase__button-wrapper {
+		flex-shrink: 0;
+	}
+
 	&::after {
 		display: none;
 	}
 }
 
-.cancel-purchase__footer-text {
-	margin: auto 0;
-}
-
 .cancel-purchase__footer-text p {
 	font-size: $font-body-small;
 	margin: 0;
@@ -186,11 +192,6 @@
 	}
 }
 
-.cancel-purchase__footer.card .cancel-purchase__button-wrapper {
-	margin: 0 auto;
-	margin-right: 0;
-}
-
 .cancel-purchase__button {
 	@include breakpoint-deprecated( "<660px" ) {
 		width: 100%;

diff --git a/client/me/purchases/cancel-purchase/support-link.jsx b/client/me/purchases/cancel-purchase/support-link.jsx
@@ -67,9 +67,7 @@ const CancelPurchaseSupportLink = ( { purchase } ) => {
 			<span>
 				{ ! isRefundable( purchase ) && maybeWithinRefundPeriod( purchase )
 					? translate( 'Have a question or seeking a refund?' )
-					: translate( 'Need help with your purchase?' ) }
-			</span>
-			<span>
+					: translate( 'Need help with your purchase?' ) }{ ' ' }
 				{ translate( '{{contactLink}}Ask a Happiness Engineer{{/contactLink}}.', {
 					components: {
 						contactLink: (

diff --git a/client/me/purchases/confirm-cancel-domain/index.jsx b/client/me/purchases/confirm-cancel-domain/index.jsx
@@ -1,18 +1,19 @@
 import { isDomainRegistration } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
-import { Card, FormLabel } from '@automattic/components';
+import { Card, CompactCard, FormLabel } from '@automattic/components';
 import i18n, { getLocaleSlug, localize } from 'i18n-calypso';
 import { map, find } from 'lodash';
 import PropTypes from 'prop-types';
 import { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import ActionPanelLink from 'calypso/components/action-panel/link';
 import QueryUserPurchases from 'calypso/components/data/query-user-purchases';
+import FormattedHeader from 'calypso/components/formatted-header';
 import FormButton from 'calypso/components/forms/form-button';
 import FormCheckbox from 'calypso/components/forms/form-checkbox';
-import FormSectionHeading from 'calypso/components/forms/form-section-heading';
 import FormSelect from 'calypso/components/forms/form-select';
 import FormTextarea from 'calypso/components/forms/form-textarea';
+import HeaderCakeBack from 'calypso/components/header-cake/back';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { getName as getDomainName } from 'calypso/lib/purchases';
@@ -191,12 +192,18 @@ class ConfirmCancelDomain extends Component {
 
 		return (
 			<div className="confirm-cancel-domain__help-message">
-				<p>{ selectedReason.helpMessage }</p>
-				{ selectedReason.showTextarea && (
-					<FormTextarea
-						className="confirm-cancel-domain__reason-details"
-						onChange={ this.onMessageChange }
-					/>
+				{ selectedReason.showTextarea ? (
+					<>
+						<p>{ selectedReason.helpMessage }</p>
+						<FormTextarea
+							className="confirm-cancel-domain__reason-details"
+							onChange={ this.onMessageChange }
+						/>
+					</>
+				) : (
+					<CompactCard className="confirm-cancel-domain__help-card" highlight="warning">
+						<span>{ selectedReason.helpMessage }</span>
+					</CompactCard>
 				) }
 			</div>
 		);
@@ -234,7 +241,7 @@ class ConfirmCancelDomain extends Component {
 		if ( this.state.submitting ) {
 			return (
 				<FormButton isPrimary disabled>
-					{ this.props.translate( 'Cancelling Domain…' ) }
+					{ this.props.translate( 'Cancelling domain…' ) }
 				</FormButton>
 			);
 		}
@@ -245,14 +252,14 @@ class ConfirmCancelDomain extends Component {
 		if ( selectedReason && 'misspelled' === selectedReason.value ) {
 			return (
 				<FormButton isPrimary onClick={ this.onSubmit } disabled={ ! confirmed }>
-					{ this.props.translate( 'Cancel Anyway' ) }
+					{ this.props.translate( 'Cancel anyway' ) }
 				</FormButton>
 			);
 		}
 
 		return (
 			<FormButton isPrimary onClick={ this.onSubmit } disabled={ ! confirmed }>
-				{ this.props.translate( 'Cancel Domain' ) }
+				{ this.props.translate( 'Cancel domain' ) }
 			</FormButton>
 		);
 	};
@@ -262,10 +269,7 @@ class ConfirmCancelDomain extends Component {
 			return (
 				<div>
 					<QueryUserPurchases />
-					<ConfirmCancelDomainLoadingPlaceholder
-						purchaseId={ this.props.purchaseId }
-						selectedSite={ this.props.selectedSite }
-					/>
+					<ConfirmCancelDomainLoadingPlaceholder />
 				</div>
 			);
 		}
@@ -284,10 +288,22 @@ class ConfirmCancelDomain extends Component {
 					title="Purchases > Confirm Cancel Domain"
 				/>
 
-				<Card>
-					<FormSectionHeading>
-						{ this.props.translate( 'Canceling %(domain)s', { args: { domain } } ) }
-					</FormSectionHeading>
+				<Card className="confirm-cancel-domain__card">
+					<div className="confirm-cancel-domain__back">
+						<HeaderCakeBack
+							icon="chevron-left"
+							href={ this.props.getCancelPurchaseUrlFor(
+								this.props.siteSlug,
+								this.props.purchaseId
+							) }
+						/>
+					</div>
+					<FormattedHeader
+						className="confirm-cancel-domain__formatted-header"
+						brandFont
+						headerText={ this.props.translate( 'Canceling %(domain)s', { args: { domain } } ) }
+						align="left"
+					/>
 					<p>
 						{ this.props.translate(
 							'Since domain cancellation can cause your site to stop working, ' +

diff --git a/client/me/purchases/confirm-cancel-domain/loading-placeholder.jsx b/client/me/purchases/confirm-cancel-domain/loading-placeholder.jsx
@@ -1,35 +1,15 @@
-import { Button, Card, CompactCard } from '@automattic/components';
+import { Card } from '@automattic/components';
 import { localize } from 'i18n-calypso';
-import PropTypes from 'prop-types';
-import LoadingPlaceholder from 'calypso/me/purchases/components/loading-placeholder';
-import { cancelPurchase } from 'calypso/me/purchases/paths';
-import titles from 'calypso/me/purchases/titles';
-
-const ConfirmCancelDomainLoadingPlaceholder = ( { purchaseId, selectedSite } ) => {
-	let path;
-
-	if ( selectedSite ) {
-		path = cancelPurchase( selectedSite.slug, purchaseId );
-	}
 
+const ConfirmCancelDomainLoadingPlaceholder = () => {
 	return (
-		<LoadingPlaceholder title={ titles.confirmCancelDomain } path={ path } isFullWidth>
-			<Card className="confirm-cancel-domain__loading-placeholder-card">
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-header" />
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-subheader" />
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-reason" />
-				<div className="loading-placeholder__content confirm-cancel-domain__loading-placeholder-reason" />
-			</Card>
-			<CompactCard>
-				<Button className="confirm-cancel-domain__loading-placeholder-cancel-button" />
-			</CompactCard>
-		</LoadingPlaceholder>
+		<Card className="confirm-cancel-domain__loading-placeholder-card">
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__header" />
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__subheader" />
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+			<div className="loading-placeholder__content cancel-purchase-loading-placeholder__reason" />
+		</Card>
 	);
 };
 
-ConfirmCancelDomainLoadingPlaceholder.propTypes = {
-	purchaseId: PropTypes.number.isRequired,
-	selectedSite: PropTypes.oneOfType( [ PropTypes.bool, PropTypes.object ] ),
-};
-
 export default localize( ConfirmCancelDomainLoadingPlaceholder );
diff --git a/client/me/purchases/confirm-cancel-domain/style.scss b/client/me/purchases/confirm-cancel-domain/style.scss
@@ -10,9 +10,24 @@
 	}
 }
 
+.confirm-cancel-domain__card {
+	padding: 32px;
+	padding-top: 12px;
+
+	.purchases__cancel-domain & {
+		box-shadow: none;
+		padding: 0;
+	}
+}
+
 .confirm-cancel-domain__help-message,
 .confirm-cancel-domain__confirm-container {
 	margin-top: 20px;
+
+	.form-label {
+		margin-top: 0;
+		margin-bottom: 1.5em;
+	}
 }
 
 .confirm-cancel-domain__reason-details {