DEV-3477-animate-on-the-contributions-dashboard-upgrade-prompt

spa/src/components/donations/DonationUpgradePrompts/DonationUpgradePrompts.styled.ts

@@ -9,3 +9,15 @@ export const Root = styled.div`
   right: 0;
   top: 58px;
 `;
+
+export const Highlight = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  border-radius: 10px;
+  border: 1px solid ${({ theme }) => theme.basePalette.greyscale.black};
+  box-shadow: -0.3px -2px 4px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.2);
+`;

spa/src/components/donations/DonationUpgradePrompts/DonationUpgradePrompts.test.tsx

@@ -6,7 +6,7 @@ import {
 } from 'constants/authConstants';
 import { DONATIONS_CORE_UPGRADE_CLOSED } from 'hooks/useSessionState';
 import useUser from 'hooks/useUser';
-import { fireEvent, render, screen } from 'test-utils';
+import { act, fireEvent, render, screen, waitFor } from 'test-utils';
 import DonationUpgradePrompts from './DonationUpgradePrompts';
 import useContributionPageList from 'hooks/useContributionPageList';
 
@@ -170,4 +170,58 @@ describe('DonationUpgradePrompts', () => {
     tree();
     expect(screen.queryByTestId('mock-donation-core-upgrade-prompt')).not.toBeInTheDocument();
   });
+
+  describe('Animation', () => {
+    const animationTimeout = 1000;
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.runOnlyPendingTimers();
+      jest.useRealTimers();
+    });
+
+    it('initially hide animation', () => {
+      tree();
+      expect(screen.getByTestId('show-animation-false')).toBeInTheDocument();
+    });
+
+    it('show animation after 1s', () => {
+      tree();
+      expect(screen.getByTestId('show-animation-false')).toBeInTheDocument();
+      act(() => {
+        jest.advanceTimersByTime(animationTimeout);
+      });
+      expect(screen.getByTestId('show-animation-true')).toBeInTheDocument();
+    });
+
+    it('show highlight after animation', () => {
+      tree();
+      act(() => {
+        jest.advanceTimersByTime(animationTimeout);
+      });
+      expect(screen.getByTestId('show-animation-true')).toBeInTheDocument();
+      expect(screen.getByTestId('prompt-highlight-true')).toBeInTheDocument();
+    });
+
+    it('hides the highlight 1 second after animation', () => {
+      tree();
+      expect(screen.getByTestId('prompt-highlight-true')).toBeInTheDocument();
+      act(() => jest.advanceTimersByTime(animationTimeout));
+      act(() => jest.runAllTimers());
+      expect(screen.getByTestId('prompt-highlight-false')).toBeInTheDocument();
+    });
+
+    it('triggers fades in the correct order', () => {
+      tree();
+      expect(screen.getByTestId('show-animation-false')).toBeInTheDocument();
+      act(() => jest.advanceTimersByTime(animationTimeout));
+      expect(screen.getByTestId('show-animation-true')).toBeInTheDocument();
+      expect(screen.getByTestId('prompt-highlight-true')).toBeInTheDocument();
+      act(() => jest.runAllTimers());
+      expect(screen.getByTestId('prompt-highlight-false')).toBeInTheDocument();
+    });
+  });
 });

spa/src/components/donations/DonationUpgradePrompts/DonationUpgradePrompts.tsx

@@ -1,10 +1,12 @@
+import { Fade } from '@material-ui/core';
+import useContributionPageList from 'hooks/useContributionPageList';
 import { DONATIONS_CORE_UPGRADE_CLOSED, useSessionState } from 'hooks/useSessionState';
 import useUser from 'hooks/useUser';
+import { useEffect, useState } from 'react';
+import { pageIsPublished } from 'utilities/editPageGetSuccessMessage';
 import { getUserRole } from 'utilities/getUserRole';
 import DonationCoreUpgradePrompt from './DonationCoreUpgradePrompt/DonationCoreUpgradePrompt';
-import { Root } from './DonationUpgradePrompts.styled';
-import useContributionPageList from 'hooks/useContributionPageList';
-import { pageIsPublished } from 'utilities/editPageGetSuccessMessage';
+import { Highlight, Root } from './DonationUpgradePrompts.styled';
 
 // This is a stopgap measure to add functionality to the Donations component in
 // the non-legacy way without refactoring the entire component. Eventually, this
@@ -15,10 +17,29 @@ export function DonationUpgradePrompts() {
   const { isOrgAdmin } = getUserRole(user);
   const { pages } = useContributionPageList();
   const [coreUpgradePromptClosed, setCoreUpgradePromptClosed] = useSessionState(DONATIONS_CORE_UPGRADE_CLOSED, false);
+  const [showAnimation, setShowAnimation] = useState(false);
+  const [showHighlight, setShowHighlight] = useState(true);
+
+  useEffect(() => {
+    if (!showAnimation) return;
+
+    const highlight = setTimeout(() => {
+      setShowHighlight(false);
+    }, 500);
+
+    return () => clearTimeout(highlight);
+  }, [showAnimation]);
+
+  useEffect(() => {
+    const animation = setTimeout(() => {
+      setShowAnimation(true);
+    }, 1000);
+
+    return () => clearTimeout(animation);
+  }, []);
 
   // The published page check is meant to prevent the prompt from conflicting
   // with the banners that <Donations> may show.
-
   if (
     pages &&
     pages.some((page) => pageIsPublished(page)) &&
@@ -28,9 +49,14 @@ export function DonationUpgradePrompts() {
     user?.revenue_programs[0].payment_provider_stripe_verified
   ) {
     return (
-      <Root>
-        <DonationCoreUpgradePrompt onClose={() => setCoreUpgradePromptClosed(true)} />
-      </Root>
+      <Fade in={showAnimation} timeout={500} data-testid={`show-animation-${showAnimation}`}>
+        <Root>
+          <Fade in={showHighlight} timeout={300} data-testid={`prompt-highlight-${showHighlight}`}>
+            <Highlight />
+          </Fade>
+          <DonationCoreUpgradePrompt onClose={() => setCoreUpgradePromptClosed(true)} />
+        </Root>
+      </Fade>
     );
   }