Purchases: Make Refund Window Clearer (#89249)

* Update context-links.js * Include refund information * Update strings * Address review * Fix string * Address review * Address review * Address review * Remove support link * Simply switch to "Refund available" * Fix style * Update style.scss
Automattic · Dec 11, 2024 · 87d9248 · 87d9248
1 parent 9b18bc6
commit 87d9248
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/client/me/purchases/manage-purchase/index.tsx b/client/me/purchases/manage-purchase/index.tsx
@@ -671,6 +671,23 @@ class ManagePurchase extends Component<
 		return null;
 	}
 
+	renderRefundText() {
+		const { purchase, translate } = this.props;
+
+		if ( ! purchase ) {
+			return null;
+		}
+
+		// Hide if refund window has lapsed.
+		if ( ! hasAmountAvailableToRefund( purchase ) || ! purchase?.mostRecentRenewDate ) {
+			return;
+		}
+
+		return (
+			<span className="manage-purchase__refund-text">{ translate( 'Refund available' ) }</span>
+		);
+	}
+
 	renderRemovePurchaseNavItem() {
 		const {
 			hasLoadedSites,
@@ -719,6 +736,7 @@ class ManagePurchase extends Component<
 			>
 				<MaterialIcon icon="delete" className="card__icon" />
 				{ text }
+				{ this.renderRefundText() }
 			</RemovePurchase>
 		);
 	}
@@ -923,6 +941,7 @@ class ManagePurchase extends Component<
 			<CompactCard href={ link } className="remove-purchase__card" onClick={ onClick }>
 				<MaterialIcon icon="delete" className="card__icon" />
 				{ getCancelPurchaseNavText( purchase, translate ) }
+				{ this.renderRefundText() }
 			</CompactCard>
 		);
 	}

diff --git a/client/me/purchases/manage-purchase/style.scss b/client/me/purchases/manage-purchase/style.scss
@@ -216,6 +216,12 @@
 	}
 }
 
+.manage-purchase__refund-text {
+	display: block;
+	font-size: $font-body-extra-small;
+	font-weight: 400;
+}
+
 .manage-purchase__settings-link {
 	display: block;
 	margin-top: 16px;