diff --git a/app/javascript/gabsocial/components/timeline_injections/progress_injection.js b/app/javascript/gabsocial/components/timeline_injections/progress_injection.js new file mode 100644 index 00000000..e697a6a3 --- /dev/null +++ b/app/javascript/gabsocial/components/timeline_injections/progress_injection.js @@ -0,0 +1,60 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { injectIntl, defineMessages } from 'react-intl' +import { monthlyExpensesComplete } from '../../initial_state' +import { + URL_DISSENTER_SHOP, + URL_DISSENTER_SHOP_DONATIONS, +} from '../../constants' +import TimelineInjectionLayout from './timeline_injection_layout' +import ProgressBar from '../progress_bar' +import Button from '../button' +import Text from '../text' + +class ProgressInjection extends React.PureComponent { + + render() { + const { + intl, + isXS, + injectionId, + } = this.props + + if (!monthlyExpensesComplete || !isXS) return
+ + const value = Math.min(parseFloat(monthlyExpensesComplete), 100) + + return ( + +
+ +
+
+ ) + } + +} + +const messages = defineMessages({ + progressTitle: { id: 'progress_title', defaultMessage: '{value}% covered this month' }, + operationsTitle: { id: 'operations_title', defaultMessage: "Gab's Operational Expenses" }, + operationsSubtitle: { id: 'operations_subtitle', defaultMessage: 'We are 100% funded by you' }, + donationTitle: { id: 'make_donation', defaultMessage: 'Make a Donation' }, +}) + +ProgressInjection.propTypes = { + injectionId: PropTypes.string.isRequired, +} + +export default injectIntl(ProgressInjection) \ No newline at end of file diff --git a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js b/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js index fa0e7a5b..da8eb720 100644 --- a/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js +++ b/app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js @@ -2,6 +2,7 @@ import { BREAKPOINT_EXTRA_SMALL, TIMELINE_INJECTION_FEATURED_GROUPS, TIMELINE_INJECTION_GROUP_CATEGORIES, + TIMELINE_INJECTION_PROGRESS, TIMELINE_INJECTION_PRO_UPGRADE, TIMELINE_INJECTION_PWA, TIMELINE_INJECTION_SHOP, @@ -10,6 +11,7 @@ import { import { FeaturedGroupsInjection, GroupCategoriesInjection, + ProgressInjection, ProUpgradeInjection, PWAInjection, ShopInjection, @@ -26,6 +28,7 @@ const initialState = getWindowDimension() const INJECTION_COMPONENTS = {} INJECTION_COMPONENTS[TIMELINE_INJECTION_FEATURED_GROUPS] = FeaturedGroupsInjection INJECTION_COMPONENTS[TIMELINE_INJECTION_GROUP_CATEGORIES] = GroupCategoriesInjection +INJECTION_COMPONENTS[TIMELINE_INJECTION_PROGRESS] = ProgressInjection INJECTION_COMPONENTS[TIMELINE_INJECTION_PRO_UPGRADE] = ProUpgradeInjection INJECTION_COMPONENTS[TIMELINE_INJECTION_PWA] = PWAInjection INJECTION_COMPONENTS[TIMELINE_INJECTION_SHOP] = ShopInjection diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js index ac651195..a1f956f2 100644 --- a/app/javascript/gabsocial/constants.js +++ b/app/javascript/gabsocial/constants.js @@ -141,6 +141,7 @@ export const TOAST_TYPE_SUCCESS = 'success' export const TIMELINE_INJECTION_FEATURED_GROUPS = 'TI_FEATURED_GROUPS' export const TIMELINE_INJECTION_GROUP_CATEGORIES = 'TI_GROUP_CATEGORIES' +export const TIMELINE_INJECTION_PROGRESS = 'TI_PROGRESS' export const TIMELINE_INJECTION_PRO_UPGRADE = 'TI_PRO_UPGRADE' export const TIMELINE_INJECTION_PWA = 'TI_PWA' export const TIMELINE_INJECTION_SHOP = 'TI_SHOP' diff --git a/app/javascript/gabsocial/reducers/settings.js b/app/javascript/gabsocial/reducers/settings.js index 214354d6..c6db27d7 100644 --- a/app/javascript/gabsocial/reducers/settings.js +++ b/app/javascript/gabsocial/reducers/settings.js @@ -8,6 +8,7 @@ import { TIMELINE_INJECTION_WEIGHT_DEFAULT, TIMELINE_INJECTION_FEATURED_GROUPS, TIMELINE_INJECTION_GROUP_CATEGORIES, + TIMELINE_INJECTION_PROGRESS, TIMELINE_INJECTION_PRO_UPGRADE, TIMELINE_INJECTION_PWA, TIMELINE_INJECTION_SHOP, @@ -26,6 +27,7 @@ const initialState = ImmutableMap({ injections: ImmutableMap({ [TIMELINE_INJECTION_FEATURED_GROUPS]: TIMELINE_INJECTION_WEIGHT_DEFAULT, [TIMELINE_INJECTION_GROUP_CATEGORIES]: TIMELINE_INJECTION_WEIGHT_DEFAULT, + [TIMELINE_INJECTION_PROGRESS]: TIMELINE_INJECTION_WEIGHT_DEFAULT, [TIMELINE_INJECTION_PRO_UPGRADE]: TIMELINE_INJECTION_WEIGHT_DEFAULT, [TIMELINE_INJECTION_PWA]: TIMELINE_INJECTION_WEIGHT_DEFAULT, [TIMELINE_INJECTION_SHOP]: TIMELINE_INJECTION_WEIGHT_DEFAULT,