diff --git a/packages/components/assets/icons/patreon.svg b/packages/components/assets/icons/patreon.svg new file mode 100644 index 0000000000..283d52be28 --- /dev/null +++ b/packages/components/assets/icons/patreon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx index 6dc9c96de7..a35f5cc1f9 100644 --- a/packages/components/src/Icon/Icon.tsx +++ b/packages/components/src/Icon/Icon.tsx @@ -102,6 +102,7 @@ export const glyphs: IGlyphs = { menu: , 'more-vert': , notifications: , + patreon: iconMap.patreon, pdf: , plastic: iconMap.plastic, profile: iconMap.profile, diff --git a/packages/components/src/Icon/svgs.tsx b/packages/components/src/Icon/svgs.tsx index e8044384a5..2123fcfed8 100644 --- a/packages/components/src/Icon/svgs.tsx +++ b/packages/components/src/Icon/svgs.tsx @@ -24,6 +24,7 @@ import websiteSVG from '../../assets/icons/icon-website.svg' import impactSVG from '../../assets/icons/impact.svg' import machineSVG from '../../assets/icons/machine.svg' import mapSVG from '../../assets/icons/map.svg' +import patreonSVG from '../../assets/icons/patreon.svg' import plasticSVG from '../../assets/icons/plastic.svg' import profileSVG from '../../assets/icons/profile.svg' import revenueSVG from '../../assets/icons/revenue.svg' @@ -63,6 +64,7 @@ export const iconMap = { loading: , machine: , map: , + patreon: , plastic: , profile: , revenue: , diff --git a/packages/components/src/Icon/types.ts b/packages/components/src/Icon/types.ts index a3d1b59172..60ef2de980 100644 --- a/packages/components/src/Icon/types.ts +++ b/packages/components/src/Icon/types.ts @@ -44,6 +44,7 @@ export type availableGlyphs = | 'menu' | 'more-vert' | 'notifications' + | 'patreon' | 'pdf' | 'plastic' | 'profile' diff --git a/src/pages/UserSettings/content/formSections/AccountSettings.section.tsx b/src/pages/UserSettings/content/formSections/AccountSettings.section.tsx index 425e64d2f3..503cbc859f 100644 --- a/src/pages/UserSettings/content/formSections/AccountSettings.section.tsx +++ b/src/pages/UserSettings/content/formSections/AccountSettings.section.tsx @@ -1,16 +1,20 @@ import React from 'react' import { observer } from 'mobx-react' import { ExternalLink } from 'oa-components' +import { useCommonStores } from 'src/common/hooks/useCommonStores' import { DISCORD_INVITE_URL } from 'src/constants' import { fields, headings } from 'src/pages/UserSettings/labels' import { Flex, Heading, Text } from 'theme-ui' import { ChangeEmailForm } from './ChangeEmail.form' import { ChangePasswordForm } from './ChangePassword.form' +import { PatreonIntegration } from './PatreonIntegration' export const AccountSettingsSection = observer(() => { const { description, title } = fields.deleteAccount + const { userStore } = useCommonStores().stores + return ( { Here you can manage the core settings of your account. + + + {title} { it('renders correctly', () => { expect(screen.getByText(HEADING)).toBeInTheDocument() - }) - - it('displays instructions on how to connect and connect button', () => { expect(screen.getByText(CONNECT_BUTTON_TEXT)).toBeInTheDocument() - expect( - screen.getByText((t) => - t.includes('Connect your Patreon account by clicking below'), - ), - ).toBeInTheDocument() - }) - - it('links to one army patreon page', () => { - expect( - screen.getByRole( - (t, e) => e?.getAttribute('href') === ONE_ARMY_PATREON_URL, - ), - ).toBeInTheDocument() }) }) @@ -129,7 +112,6 @@ describe('PatreonIntegration', () => { expect(mockRemovePatreonConnection).toHaveBeenCalledWith( mockUser.userName, ) - expect(screen.getByText(CONNECT_BUTTON_TEXT)).toBeInTheDocument() }) }) @@ -150,15 +132,5 @@ describe('PatreonIntegration', () => { screen.queryByText(WRONG_PATREON_TIER_TITLE), ).not.toBeInTheDocument() }) - - it('displays become a supporter message', () => { - expect( - screen.getByText((t) => - t.includes( - 'It looks like you are not an active supporter of this project.', - ), - ), - ).toBeInTheDocument() - }) }) }) diff --git a/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx b/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx index 49b1852b7c..540d360a2e 100644 --- a/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx +++ b/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx @@ -1,46 +1,26 @@ import * as React from 'react' -import { Button } from 'oa-components' +import { Button, Icon } from 'oa-components' import { useCommonStores } from 'src/common/hooks/useCommonStores' import { PATREON_CLIENT_ID } from 'src/config/config' -import { Box, Flex, Heading, Image, Text } from 'theme-ui' +import { Flex, Heading, Image, Text } from 'theme-ui' -import { FlexSectionContainer } from './elements' - -import type { IUserPP } from 'src/models' - -export const HEADING = '❤️ Become a Supporter' -const SUBHEADING = - 'Support us on Patreon to get a badge here on the platform and special insights and voting rights on decisions.' -const BETA_DISCLAIMER = - 'This feature is still in beta and we will continue to roll out more features for supporters.' +export const HEADING = 'Patreon' export const SUCCESS_MESSAGE = 'Successfully linked Patreon account!' export const SUPPORTER_MESSAGE = 'Thanks for supporting us! :) Update your data if you changed your Patreon tiers or remove the connection below.' -export const CONNECT_BUTTON_TEXT = 'Connect To Patreon' -export const UPDATE_BUTTON_TEXT = 'Update Patreon Data' -export const REMOVE_BUTTON_TEXT = 'Remove Connection' +export const CONNECT_BUTTON_TEXT = 'Connect' +export const UPDATE_BUTTON_TEXT = 'Update' +export const REMOVE_BUTTON_TEXT = 'Disconnect' -export const ONE_ARMY_PATREON_URL = 'https://www.patreon.com/one_army' - -export const PatreonIntegration = (props: { user: IUserPP }) => { +export const PatreonIntegration = ({ user }) => { const { userStore } = useCommonStores().stores - const [user, setUser] = React.useState(props.user) const removePatreonConnection = () => { if (!user) { return } userStore.removePatreonConnection(user.userName) - // Perform an optimistic update to avoid waiting for database calls to return. - setUser({ - ...user, - badges: { - ...user.badges, - supporter: false, - }, - patreon: undefined, - }) } const patreonRedirect = () => { @@ -60,19 +40,24 @@ export const PatreonIntegration = (props: { user: IUserPP }) => { } return ( - - - {HEADING} - - {SUBHEADING} - {BETA_DISCLAIMER} - {user.patreon ? ( - - + + + + + {HEADING} + + {user.patreon ? ( + <> { }} /> {SUCCESS_MESSAGE} - - {user.badges?.supporter && user.patreon.membership ? ( - - {SUPPORTER_MESSAGE} - {user.patreon.membership.tiers.map(({ id, attributes }) => ( - -
+ {SUPPORTER_MESSAGE} + {user.patreon.membership.tiers.map(({ id, attributes }) => ( + - -
- {attributes.title} - - ))} - - ) : ( - - - Thanks for connecting your account! It looks like you are not an - active supporter of this project. You can support us{' '} - - here - - . If you become a supporter in the future, click the button - below to update your data. - - - )} - - ) : ( - - How it works:
- 1.{' '} - - Support us - {' '} - on Patreon
- 2. Connect your Patreon account by clicking below
- 3. You are now part of the special supporters club! - - )} - - {user.patreon && ( )} - + ) } diff --git a/src/pages/UserSettings/content/formSections/UserProfile.section.tsx b/src/pages/UserSettings/content/formSections/UserProfile.section.tsx index 128d42c1b5..26fd64dcd3 100644 --- a/src/pages/UserSettings/content/formSections/UserProfile.section.tsx +++ b/src/pages/UserSettings/content/formSections/UserProfile.section.tsx @@ -20,7 +20,6 @@ import { FlexSectionContainer } from './elements' import { EmailNotificationsSection } from './EmailNotifications.section' import { ExpertiseSection } from './Expertise.section' import { FocusSection } from './Focus.section' -import { PatreonIntegration } from './PatreonIntegration' import { PublicContactSection } from './PublicContact.section' import { SettingsFormNotifications } from './SettingsFormNotifications' import { UserInfosSection } from './UserInfos.section' @@ -222,7 +221,6 @@ export const UserProfile = () => { /> )} -