feat: drop custom donation thank you page

goratt12 · Jun 17, 2024 · 117d24c · 117d24c
1 parent f1f8a9f
commit 117d24c
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 135 deletions.
diff --git a/packages/components/assets/images/themes/precious-plastic/donation-banner.jpg b/packages/components/assets/images/themes/precious-plastic/donation-banner.jpg
diff --git a/packages/components/src/DonationRequest/DonationRequest.stories.tsx b/packages/components/src/DonationRequest/DonationRequest.stories.tsx
@@ -1,4 +1,3 @@
-import imageFile from '../../assets/images/themes/precious-plastic/donation-banner.jpg';
 import { DonationRequest } from './DonationRequest'
 
 import type { Meta, StoryFn } from '@storybook/react'
@@ -14,22 +13,6 @@ export const Default: StoryFn<typeof DonationRequest> = () => (
       body="All of the content here is free. Your donation supports this library of Open Source recycling knowledge. Making it possible for everyone in the world to use it and start recycling."
       callback={() => {}}
       iframeSrc="https://donorbox.org/embed/ppcpdonor?language=en"
-      imageURL={imageFile}
-      link="https://bbc.co.uk/"
-    />
-  </div>
-)
-
-export const DonationMade: StoryFn<typeof DonationRequest> = () => (
-  <div style={{ maxWidth: '1000px' }}>
-    {
-      /* Duplicate prod logic to see button text has changed */
-      window.postMessage('CAN_START_FILE_DOWNLOAD', '*')
-    }
-    <DonationRequest
-      body="All of the content here is free. Your donation supports this library of Open Source recycling knowledge. Making it possible for everyone in the world to use it and start recycling."
-      callback={() => {}}
-      iframeSrc="https://community.preciousplastic.com/donation-thank-you"
       imageURL="https://images.unsplash.com/photo-1520222984843-df35ebc0f24d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9"
       link="https://bbc.co.uk/"
     />

diff --git a/packages/components/src/DonationRequest/DonationRequest.test.tsx b/packages/components/src/DonationRequest/DonationRequest.test.tsx
@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 
 import { render } from '../test/utils'
-import { DonationRequest, REQUEST_BUTTON_SKIP } from './DonationRequest'
+import { BUTTON_LABEL,DonationRequest } from './DonationRequest'
 
 describe('DonationRequest', () => {
   it('shows the expected content', async () => {
@@ -43,7 +43,7 @@ describe('DonationRequest', () => {
       />,
     )
 
-    const skipButton = screen.getByText(REQUEST_BUTTON_SKIP)
+    const skipButton = screen.getByText(BUTTON_LABEL)
     fireEvent.click(skipButton)
 
     expect(mockCallback).toHaveBeenCalled()

diff --git a/packages/components/src/DonationRequest/DonationRequest.tsx b/packages/components/src/DonationRequest/DonationRequest.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { AspectImage, Card, Flex, Text } from 'theme-ui'
 
 import { Button } from '../Button/Button'
@@ -12,15 +11,13 @@ export interface IProps {
   link: string
 }
 
-const FALLBACK_DONATION_WIDGET = "https://donorbox.org/embed/onearmy?a=b"
+const FALLBACK_DONATION_WIDGET = 'https://donorbox.org/embed/onearmy?a=b'
 const REQUEST_TITLE = 'Support our work'
 const REQUEST_THANKYOU = 'Thank you for helping to make this possible'
-export const REQUEST_BUTTON_SKIP = 'Skip this time'
-export const REQUEST_BUTTON_DOWNLOAD = 'Download Now!'
+export const BUTTON_LABEL = 'Download'
 
 export const DonationRequest = (props: IProps) => {
   const { body, callback, iframeSrc, imageURL, link } = props
-  const [isStartDownload, setIsStartDownload] = useState<boolean>(false)
   const iframeArgs = {
     allowpaymentrequest: 'allowpaymentrequest',
     allow: 'payment',
@@ -32,24 +29,6 @@ export const DonationRequest = (props: IProps) => {
     src: iframeSrc || FALLBACK_DONATION_WIDGET,
   }
 
-  const handleMessage = (event: MessageEvent) => {
-    if (event.origin != window.location.origin) {
-      return
-    }
-
-    switch (event.data) {
-      case 'CAN_START_FILE_DOWNLOAD':
-        setIsStartDownload(true)
-        window.open(link)
-        break
-    }
-  }
-
-  useEffect(() => {
-    window.addEventListener('message', handleMessage)
-    return () => window.removeEventListener('message', handleMessage)
-  }, [])
-
   return (
     <Card
       sx={{
@@ -71,16 +50,17 @@ export const DonationRequest = (props: IProps) => {
         }}
       >
         <Flex sx={{ flexDirection: 'column', flex: 1 }}>
-          {imageURL &&
-          <Flex sx={{ display: ['none', 'inline'] }}>
-            <AspectImage
-              loading="lazy"
-              ratio={16 / 9}
-              src={imageURL}
-              alt={REQUEST_TITLE}
-              data-testid="donationRequestImage"
-            />
-          </Flex>}
+          {imageURL && (
+            <Flex sx={{ display: ['none', 'inline'] }}>
+              <AspectImage
+                loading="lazy"
+                ratio={16 / 9}
+                src={imageURL}
+                alt={REQUEST_TITLE}
+                data-testid="donationRequestImage"
+              />
+            </Flex>
+          )}
 
           <Text sx={{ padding: [2, 4, 6] }}>
             <Text as="h1">{REQUEST_TITLE}</Text>
@@ -92,7 +72,7 @@ export const DonationRequest = (props: IProps) => {
         <Flex
           sx={{
             borderLeft: [0, '2px solid'],
-            minHeight: [isStartDownload ? '400px' : '650px', '650px'],
+            minHeight: '650px',
             width: ['100%', '350px', '400px'],
           }}
         >
@@ -115,20 +95,12 @@ export const DonationRequest = (props: IProps) => {
           alignItems: 'center',
         }}
       >
-        {isStartDownload && (
-          <Text as="p" sx={{ color: 'grey', textAlign: 'center' }}>
-            Download hasn't started yet? Tap the button
-          </Text>
-        )}
-
         <ExternalLink
           href={link}
           onClick={callback}
           data-cy="DonationRequestSkip"
         >
-          <Button>
-            {isStartDownload ? REQUEST_BUTTON_DOWNLOAD : REQUEST_BUTTON_SKIP}
-          </Button>
+          <Button>{BUTTON_LABEL}</Button>
         </ExternalLink>
       </Flex>
     </Card>

diff --git a/src/pages/DonationThankYou/DonationThankYou.test.tsx b/src/pages/DonationThankYou/DonationThankYou.test.tsx
diff --git a/src/pages/DonationThankYou/DonationThankYou.tsx b/src/pages/DonationThankYou/DonationThankYou.tsx
diff --git a/src/pages/PageList.tsx b/src/pages/PageList.tsx
@@ -27,10 +27,6 @@ const Unsubscribe = lazy(() => import('./Unsubscribe/Unsubscribe'))
 
 const Patreon = lazy(() => import('./Patreon/Patreon'))
 
-const DonationThankYou = lazy(
-  () => import('./DonationThankYou/DonationThankYou'),
-)
-
 export const getAvailablePageList = (supportedModules: MODULE[]): IPageMeta[] =>
   COMMUNITY_PAGES.filter((pageItem) =>
     supportedModules.includes(pageItem.moduleName),
@@ -160,14 +156,6 @@ const patreon = {
   description: '',
 }
 
-export const donationThankYou = {
-  moduleName: MODULE.CORE,
-  path: '/donation-thank-you',
-  component: <DonationThankYou />,
-  title: 'Thank You!',
-  description: '',
-}
-
 export const COMMUNITY_PAGES: IPageMeta[] = [
   howTo,
   maps,

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -11,7 +11,6 @@ import { ScrollToTop } from '../common/ScrollToTop'
 import { NotFoundPage } from './NotFound/NotFound'
 import {
   COMMUNITY_PAGES_PROFILE,
-  donationThankYou,
   getAvailablePageList,
   NO_HEADER_PAGES,
   POLICY_PAGES,
@@ -82,10 +81,6 @@ export const Pages = () => {
               />
             ) : null}
             <Route index element={<Navigate to="/academy" />} />
-            <Route
-              path={donationThankYou.path}
-              element={donationThankYou.component}
-            />
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </Suspense>