From f3ce85d7facda76c683a98fcf85e3dea99af4fb3 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 5 Jan 2024 20:00:00 +0700
Subject: [PATCH] refactor(client): migrate Bootstrap components in
 update-stripe-card (#52816)

---
 .../Donation/card-update-alert-handler.tsx     | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Donation/card-update-alert-handler.tsx b/client/src/components/Donation/card-update-alert-handler.tsx
index 26198423444..c75ad3f3016 100644
--- a/client/src/components/Donation/card-update-alert-handler.tsx
+++ b/client/src/components/Donation/card-update-alert-handler.tsx
@@ -1,7 +1,7 @@
-import { Alert, Button } from '@freecodecamp/react-bootstrap';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import Spinner from 'react-spinkit';
+import { Alert } from '@freecodecamp/ui';
 
 type CardUpdateAlertHandlerProps = {
   error: string | null;
@@ -19,21 +19,15 @@ function CardUpdateAlertHandler({
   const { t } = useTranslation();
   const style = redirecting ? 'info' : success ? 'success' : 'danger';
 
-  const heading = redirecting
+  const message = redirecting
     ? `${t('donate.redirecting')}`
     : success
       ? `${t('donate.success-card-update')}`
       : `${t('donate.error-card-update')}`;
 
   return (
-    <Alert
-      bsStyle={style}
-      className='donation-completion'
-      closeLabel={t('buttons.close')}
-    >
-      <h4>
-        <b>{heading}</b>
-      </h4>
+    <Alert variant={style} className='donation-completion'>
+      <p>{message}</p>
       <div className='donation-completion-body'>
         {redirecting && (
           <Spinner
@@ -48,9 +42,9 @@ function CardUpdateAlertHandler({
       <div className='donation-completion-buttons'>
         {error && (
           <div>
-            <Button bsStyle='primary' onClick={reset}>
+            <button type='button' className='try-again-button' onClick={reset}>
               {t('buttons.try-again')}
-            </Button>
+            </button>
           </div>
         )}
       </div>