feature: use toast component

impress-org · Jul 31, 2023 · 23e889f · 23e889f
1 parent 6bffe10
commit 23e889f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx b/src/DonationForms/V2/resources/components/DonationFormsListTable.tsx
@@ -1,5 +1,5 @@
 import {createContext, useState, useCallback} from 'react';
-import {__} from '@wordpress/i18n';
+import {__, sprintf} from '@wordpress/i18n';
 import {ListTableApi, ListTablePage} from '@givewp/components';
 import {DonationFormsRowActions} from './DonationFormsRowActions';
 import MigrationBanner from './Migration';
@@ -10,6 +10,7 @@ import {BulkActionsConfig, FilterConfig} from '@givewp/components/ListTable/List
 import Select from '@givewp/components/ListTable/Select';
 import {Interweave} from 'interweave';
 import BlankSlate from '@givewp/components/ListTable/BlankSlate';
+import Toast from "@givewp/components/AdminUI/Toast";
 
 declare global {
     interface Window {
@@ -31,10 +32,11 @@ declare global {
     }
 }
 
-interface OnboardingStateProps {
+interface MigrationTransferStateProps {
     migrationOnboardingCompleted: boolean;
     showMigrationSuccessDialog: boolean;
     showTransferSuccessDialog: boolean;
+    showMigrationCompletedToast: boolean;
     formId: number | null;
     formName: string | null;
 }
@@ -95,7 +97,7 @@ const v2FormBadge = item => {
     if (item.v2form) {
         return <div className={styles.v2Badge}>
             <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="2" cy="2" r="2" fill="#2B13BF"/>
+                <circle cx="2" cy="2" r="2" fill="#2B13BF" />
             </svg>
             V2
         </div>;
@@ -211,10 +213,11 @@ const ListTableBlankSlate = (
 
 export default function DonationFormsListTable() {
 
-    const [state, setState] = useState<OnboardingStateProps>({
+    const [state, setState] = useState<MigrationTransferStateProps>({
         migrationOnboardingCompleted: Boolean(window.GiveDonationForms.migrationOnboardingCompleted),
         showMigrationSuccessDialog: false,
         showTransferSuccessDialog: false,
+        showMigrationCompletedToast: false,
         formId: null,
         formName: null,
     })
@@ -229,6 +232,11 @@ export default function DonationFormsListTable() {
         showTransferSuccessDialog: false
     })), []);
 
+    const closeMigrationCompletedToast = useCallback(() => setState(prev => ({
+        ...prev,
+        showMigrationCompletedToast: false
+    })), []);
+
     return (
         <MigrationOnboardingContext.Provider value={[state, setState]}>
             <ListTablePage
@@ -259,7 +267,16 @@ export default function DonationFormsListTable() {
                 <MigrationSuccessDialog formId={state.formId} handleClose={closeMigrationSuccessDialog} />
             )}
             {state.showTransferSuccessDialog && (
-                <TransferSuccessDialog formId={state.formId} formName={state.formName} handleClose={closeTransferSuccessDialog} />
+                <TransferSuccessDialog formId={state.formId} formName={state.formName}
+                                       handleClose={closeTransferSuccessDialog} />
+            )}
+            {state.showMigrationCompletedToast && (
+                <Toast
+                    type="success"
+                    autoClose={6000}
+                    handleClose={closeMigrationCompletedToast}>
+                    {sprintf(__('Migration of the form "%s" completed successfully', 'give'), state.formName)}
+                </Toast>
             )}
         </MigrationOnboardingContext.Provider>
     );

diff --git a/src/DonationForms/V2/resources/components/DonationFormsRowActions.tsx b/src/DonationForms/V2/resources/components/DonationFormsRowActions.tsx
@@ -14,7 +14,7 @@ const donationFormsApi = new ListTableApi(window.GiveDonationForms);
 export function DonationFormsRowActions({data, item, removeRow, addRow, setUpdateErrors, parameters}) {
     const {mutate} = useSWRConfig();
     const showConfirmModal = useContext(ShowConfirmModalContext);
-    const [onboardingState, setOnboardingState] = useContext(MigrationOnboardingContext);
+    const [MigrationTransferState, setMigrationTransferState] = useContext(MigrationOnboardingContext);
     const trashEnabled = Boolean(data?.trash);
     const deleteEndpoint = trashEnabled && !item.status.includes('trash') ? '/trash' : '/delete';
 
@@ -75,14 +75,20 @@ export function DonationFormsRowActions({data, item, removeRow, addRow, setUpdat
                             onClick={addRow(async (id) => {
                                 const response = await fetchAndUpdateErrors(parameters, '/migrate', id, 'POST');
 
-                                if (!onboardingState.migrationOnboardingCompleted) {
+                                if (!MigrationTransferState.migrationOnboardingCompleted) {
                                     updateOnboardingOption('migration_onboarding_completed').then((data) => {
-                                        setOnboardingState(prev => ({
+                                        setMigrationTransferState(prev => ({
                                             ...prev,
                                             showMigrationSuccessDialog: true,
                                             formId: response.successes[0]
                                         }))
                                     })
+                                } else {
+                                    setMigrationTransferState(prev => ({
+                                        ...prev,
+                                        formName: item?.name,
+                                        showMigrationCompletedToast: true
+                                    }))
                                 }
 
                                 return response
@@ -95,7 +101,7 @@ export function DonationFormsRowActions({data, item, removeRow, addRow, setUpdat
                     {item.transfer && (
                         <RowAction
                             onClick={addRow(async (id) => {
-                                setOnboardingState(prev => ({
+                                setMigrationTransferState(prev => ({
                                     ...prev,
                                     showTransferSuccessDialog: true,
                                     formName: item?.name,