From 24ea4c0fb9a4e71dc23aafbcbf144ac105873ac5 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 3 Aug 2023 22:46:26 +0100
Subject: [PATCH] Updated Tips&Donations portal success and loading states
 design (#17592)

refs https://github.com/TryGhost/Product/issues/3677

- Updated portal loading design when user clicks on a Tips&Donations
link
- Removed "Retry" button from error state and added "Close"
---
 apps/portal/src/components/pages/SupportError.js | 9 ++++-----
 apps/portal/src/components/pages/SupportPage.js  | 8 +++-----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/portal/src/components/pages/SupportError.js b/apps/portal/src/components/pages/SupportError.js
index 92bcb4ae2e..14348fed31 100644
--- a/apps/portal/src/components/pages/SupportError.js
+++ b/apps/portal/src/components/pages/SupportError.js
@@ -24,10 +24,10 @@ export const TipsAndDonationsErrorStyle = `
 `;
 
 const SupportError = ({error}) => {
+    const {onAction} = useContext(AppContext);
     const errorTitle = 'Sorry, that didn’t work.';
     const errorMessage = error || 'There was an error processing your payment. Please try again.';
-    const buttonLabel = 'Retry';
-    const {brandColor} = useContext(AppContext);
+    const buttonLabel = 'Close';
 
     return (
         <div className='gh-portal-content gh-portal-tips-and-donations'>
@@ -41,10 +41,9 @@ const SupportError = ({error}) => {
             <ActionButton
                 style={{width: '100%'}}
                 retry={true}
-                // onClick = {() => onAction('closePopup')}
+                onClick = {() => onAction('closePopup')}
                 disabled={false}
-                brandColor={brandColor}
-                // brandColor='#000000'
+                brandColor='#000000'
                 label={buttonLabel}
                 isDestructive={true}
                 isRunning={false}
diff --git a/apps/portal/src/components/pages/SupportPage.js b/apps/portal/src/components/pages/SupportPage.js
index 5c09c67b96..b6964aa9cc 100644
--- a/apps/portal/src/components/pages/SupportPage.js
+++ b/apps/portal/src/components/pages/SupportPage.js
@@ -1,11 +1,9 @@
-import {useEffect, useState, useContext} from 'react';
+import {useEffect, useState} from 'react';
 import SupportError from './SupportError';
 import LoadingPage from './LoadingPage';
 import setupGhostApi from '../../utils/api';
-import AppContext from '../../AppContext';
 
 const SupportPage = () => {
-    const {site} = useContext(AppContext);
     const [isLoading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
@@ -37,10 +35,10 @@ const SupportPage = () => {
     }, []);
 
     if (isLoading) {
-        const title = `Support ${site.title}`;
+        const title = `Loading checkout...`;
         return (
             <div>
-                <h1>{title}</h1>
+                <h1 style={{textAlign: 'center'}}>{title}</h1>
                 <LoadingPage />
             </div>
         );