Feature: Default form tooltip

src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/ArchivedCampaignNotice.tsx

@@ -0,0 +1,16 @@
+import {__} from '@wordpress/i18n';
+import {TriangleIcon} from '@givewp/campaigns/admin/components/Icons';
+
+export default ({handleClick}) => (
+    <>
+        <TriangleIcon />
+        <span>
+            {__("Your campaign is currently archived. You can view the campaign details but won't be able to make any changes until it's moved out of archive.", 'give')}
+        </span>
+        <strong>
+            <a href="#" onClick={() => handleClick()}>
+                {__('Move to draft', 'give')}
+            </a>
+        </strong>
+    </>
+)

src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/DefaultFormNotice.tsx

@@ -0,0 +1,19 @@
+import {__} from '@wordpress/i18n';
+import {CloseIcon} from "@givewp/campaigns/admin/components/Icons";
+
+import styles from './styles.module.scss'
+
+export default ({handleClick}) => (
+    <div className={styles.tooltip}>
+        <div className={styles.close} onClick={handleClick}>
+            <CloseIcon />
+        </div>
+        <h3>
+            {__('Default campaign form', 'give')}
+        </h3>
+        <div className={styles.content}>
+            {__('The default form will always appear at the top of this list. Your campaign page and blocks will collect donations through this form by default. You can change it at any time.', 'give')}
+        </div>
+    </div>
+)
+

src/Campaigns/resources/admin/components/CampaignDetailsPage/Components/Notices/styles.module.scss

@@ -0,0 +1,37 @@
+.tooltip {
+    position: absolute;
+    top: 420px; // hacky but I can't think of any other way as the entire list table is wrapped in an element that has the overflow property set
+    left: 100px;
+    z-index: 9;
+    width: 377px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 16px;
+    padding: 16px 24px 24px;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
+    border: solid 2px #6b7280;
+    background-color: #fff;
+
+    .close {
+        cursor: pointer;
+        position: absolute;
+        right: 13px;
+        top: 13px;
+    }
+
+    h3 {
+        padding: 0;
+        margin: 0;
+        font-size: 16px;
+        color: #060c1a;
+    }
+
+    .content {
+        font-size: 14px;
+        color: #1f2937;
+        font-weight: normal;
+    }
+}

src/Campaigns/resources/admin/components/CampaignDetailsPage/index.tsx

@@ -12,6 +12,8 @@ import {Spinner as GiveSpinner} from '@givewp/components';
 import {Spinner} from '@wordpress/components';
 import Tabs from './Tabs';
 import ArchiveCampaignDialog from './Components/ArchiveCampaignDialog';
+import ArchivedCampaignNotice from './Components/Notices/ArchivedCampaignNotice';
+import DefaultFormNotice from './Components/Notices/DefaultFormNotice';
 import {DotsIcons, TrashIcon, ViewIcon, ArrowReverse, BreadcrumbSeparatorIcon, TriangleIcon} from '../Icons';
 import NotificationPlaceholder from '../Notifications';
 import cx from 'classnames';
@@ -28,11 +30,11 @@ interface Show {
 }
 
 
-const StatusBadge = ({status}:{status: string}) => {
+const StatusBadge = ({status}: { status: string }) => {
     const statusMap = {
-        active:  __('Active', 'give'),
-        archived:  __('Archived', 'give'),
-        draft:  __('Draft', 'give')
+        active: __('Active', 'give'),
+        archived: __('Archived', 'give'),
+        draft: __('Draft', 'give')
     };
 
     return (
@@ -67,7 +69,7 @@ export default function CampaignsDetailsPage({campaignId}) {
         apiFetch({
             path: `/give-api/v2/campaigns/${campaignId}`,
             method: 'OPTIONS',
-        }).then(({schema}: {schema: JSONSchemaType<any>}) => {
+        }).then(({schema}: { schema: JSONSchemaType<any> }) => {
             setResolver({
                 resolver: ajvResolver(schema),
             });
@@ -109,25 +111,28 @@ export default function CampaignsDetailsPage({campaignId}) {
         dispatch.addNotice({
             id: 'update-archive-notice',
             type: 'warning',
-            content: () => (
-                <>
-                    <TriangleIcon />
-                    <span>
-                        {__("Your campaign is currently archived. You can view the campaign details but won't be able to make any changes until it's moved out of archive.", 'give')}
-                    </span>
-                    <strong>
-                        <a href="#" onClick={() => {
-                            updateStatus('draft');
-                            dispatch.dismissNotification('update-archive-notice');
-                        }}>
-                            {__('Move to draft', 'give')}
-                        </a>
-                    </strong>
-                </>
-            )
+            onDismiss: () => updateStatus('draft'),
+            content: (onDismiss: Function) => <ArchivedCampaignNotice handleClick={onDismiss} />
         });
     }, [campaign?.status]);
 
+    // Default form notification
+    useEffect(() => {
+        if (!window.GiveDonationForms.showDefaultFormTooltip) {
+            return;
+        }
+
+        dispatch.addCustomNotice({
+            id: 'default-form-tooltip',
+            notificationType: 'campaigns-default-form',
+            onDismiss: async () => await apiFetch({
+                url: window.GiveDonationForms.defaultFormActionUrl,
+                method: 'POST',
+            }),
+            content: (onDismiss: Function) => <DefaultFormNotice handleClick={onDismiss} />
+        });
+    }, []);
+
     const onSubmit: SubmitHandler<Campaign> = async (data) => {
 
         if (formState.isDirty) {
@@ -145,7 +150,7 @@ export default function CampaignsDetailsPage({campaignId}) {
                     id: `save-${data.status}`,
                     content: __('Campaign updated', 'give')
                 });
-            } catch(err) {
+            } catch (err) {
                 setIsSaving(null);
 
                 dispatch.addSnackbarNotice({
@@ -175,7 +180,7 @@ export default function CampaignsDetailsPage({campaignId}) {
                     id: `update-${status}`,
                     content: getMessageByStatus(status)
                 });
-            } catch(err) {
+            } catch (err) {
                 setShow({
                     contextMenu: false,
                     confirmationModal: false,

src/Campaigns/resources/admin/components/Notifications/Notification.tsx

@@ -6,14 +6,14 @@ import {CloseIcon} from '../Icons';
 
 import styles from './Notices.module.scss';
 
-const Snackbar = ({notification, onDismiss}: {notification: Notification, onDismiss: () => void}) => {
+const Snackbar = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => {
     return (
 
         <div
             className={cx(styles.snackbar, styles[`type-${notification.type}-snackbar`])}
         >
             <div>
-                {typeof notification.content === 'function' ? notification.content() : notification.content}
+                {typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content}
             </div>
             {notification.isDismissible && (
                 <a href="#" onClick={onDismiss}>
@@ -25,14 +25,14 @@ const Snackbar = ({notification, onDismiss}: {notification: Notification, onDism
     );
 };
 
-const Notice = ({notification, onDismiss}: {notification: Notification, onDismiss: () => void}) => {
+const Notice = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => {
     return (
 
         <div
             className={cx(styles.notice, styles[`type-${notification.type}`])}
         >
             <div className={styles.notificationContent}>
-                {typeof notification.content === 'function' ? notification.content() : notification.content}
+                {typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content}
             </div>
             {notification.isDismissible && (
                 <a href="#" onClick={onDismiss}>
@@ -44,6 +44,10 @@ const Notice = ({notification, onDismiss}: {notification: Notification, onDismis
     );
 };
 
+const Custom = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => (
+    typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content
+)
+
 export default ({notification}) => {
 
     useEffect(() => {
@@ -63,17 +67,12 @@ export default ({notification}) => {
     };
 
 
-    return notification.notificationType === 'snackbar'
-        ? (
-            <Snackbar
-                notification={notification}
-                onDismiss={onDismiss}
-            />
-        ) : (
-            <Notice
-                notification={notification}
-                onDismiss={onDismiss}
-            />
-        );
-
+    switch (notification.notificationType) {
+        case 'snackbar':
+            return <Snackbar notification={notification} onDismiss={onDismiss} />
+        case 'notice':
+            return <Notice notification={notification} onDismiss={onDismiss} />
+        default:
+            return <Custom notification={notification} onDismiss={onDismiss} />
+    }
 }

src/Campaigns/resources/admin/components/Notifications/index.tsx

@@ -2,7 +2,7 @@ import {useSelect} from '@wordpress/data';
 import Notification from './Notification';
 import styles from './Notices.module.scss';
 
-export default ({type}: {type: 'snackbar' | 'notice'}) => {
+export default ({type}: {type: 'snackbar' | 'notice' | string}) => {
     //@ts-ignore
     const notifications = useSelect(select => select('givewp/campaign-notifications').getNotificationsByType(type));
 

src/Campaigns/resources/store/actions.ts

@@ -28,6 +28,19 @@ export function addNotice(notification: Notification) {
     };
 }
 
+export function addCustomNotice(notification: Notification) {
+    return {
+        type: 'ADD_NOTIFICATION',
+        notification: {
+            ...notification,
+            autoHide: notification?.autoHide ?? false,
+            isDismissible: notification?.isDismissible ?? true,
+            duration: notification?.duration ?? 5000,
+            notificationType: notification?.notificationType,
+        },
+    };
+}
+
 export function dismissNotification(id: string) {
     return {
         type: 'DISMISS_NOTIFICATION',

src/Campaigns/resources/store/index.ts

@@ -15,7 +15,10 @@ export const store = createReduxStore('givewp/campaign-notifications', {
     reducer(state = [], action) {
         switch (action.type) {
             case 'ADD_NOTIFICATION':
-                state.push(action.notification);
+                const notificationExist = state.filter((notification: { id: string }) => notification.id === action.notification.id);
+                if (!notificationExist.length) {
+                    state.push(action.notification);
+                }
                 return state;
 
             case 'DISMISS_NOTIFICATION':

src/Campaigns/resources/types.ts

@@ -1,7 +1,7 @@
 export type Notification = {
     id: string;
     content: string | JSX.Element | Function;
-    notificationType?: 'notice' | 'snackbar';
+    notificationType?: 'notice' | 'snackbar' | string;
     type?: 'error' | 'warning' | 'info' | 'success';
     isDismissible?: boolean;
     autoHide?: boolean;
@@ -12,12 +12,13 @@ export type Notification = {
 declare module "@wordpress/data" {
     export function select(key: 'givewp/campaign-notifications'): {
         getNotifications(): Notification[],
-        getNotificationsByType(type: 'snackbar' | 'notice'): Notification[]
+        getNotificationsByType(type: 'snackbar' | 'notice' | string): Notification[]
     };
 
     export function dispatch(key: 'givewp/campaign-notifications'): {
         addSnackbarNotice(notification: Notification): void,
         addNotice(notification: Notification): void,
+        addCustomNotice(notification: Notification): void,
         dismissNotification(id: string): void
     };
 }

src/DonationForms/V2/DonationFormsAdminPage.php

@@ -40,11 +40,17 @@ class DonationFormsAdminPage
      */
     protected $migrationApiRoot;
 
+    /**
+     * @var string
+     */
+    protected $defaultFormActionUrl;
+
     public function __construct()
     {
         $this->apiRoot = esc_url_raw(rest_url('give-api/v2/admin/forms'));
         $this->bannerActionUrl = admin_url('admin-ajax.php?action=givewp_show_onboarding_banner');
         $this->tooltipActionUrl = admin_url('admin-ajax.php?action=givewp_show_upgraded_tooltip');
+        $this->defaultFormActionUrl = admin_url('admin-ajax.php?action=givewp_show_default_form_tooltip');
         $this->migrationApiRoot = esc_url_raw(rest_url('give-api/v2/admin/forms/migrate'));
         $this->apiNonce = wp_create_nonce('wp_rest');
         $this->adminUrl = admin_url();
@@ -99,13 +105,15 @@ public function loadScripts()
             'apiRoot' => $this->apiRoot,
             'bannerActionUrl' => $this->bannerActionUrl,
             'tooltipActionUrl' => $this->tooltipActionUrl,
+            'defaultFormActionUrl' => $this->defaultFormActionUrl,
             'apiNonce' => $this->apiNonce,
             'preload' => $this->preloadDonationForms(),
             'authors' => $this->getAuthors(),
             'table' => give(DonationFormsListTable::class)->toArray(),
             'adminUrl' => $this->adminUrl,
             'pluginUrl' => GIVE_PLUGIN_URL,
             'showUpgradedTooltip' => !get_user_meta(get_current_user_id(), 'givewp-show-upgraded-tooltip', true),
+            'showDefaultFormTooltip' => !get_user_meta(get_current_user_id(), 'givewp-show-default-form-tooltip', true),
             'supportedAddons' => $this->getSupportedAddons(),
             'supportedGateways' => $this->getSupportedGateways(),
             'isOptionBasedFormEditorEnabled' => OptionBasedFormEditor::isEnabled(),