diff --git a/assets/src/images/admin/white-external-icon.svg b/assets/src/images/admin/white-external-icon.svg new file mode 100644 index 0000000000..3ec2f8eb7f --- /dev/null +++ b/assets/src/images/admin/white-external-icon.svg @@ -0,0 +1,8 @@ + + + + diff --git a/assets/src/js/admin/reports/store/index.js b/assets/src/js/admin/reports/store/index.js index 6ec2fed62c..6e7a7517e2 100644 --- a/assets/src/js/admin/reports/store/index.js +++ b/assets/src/js/admin/reports/store/index.js @@ -1,11 +1,9 @@ -import { createContext, useContext, useReducer } from 'react'; +import {createContext, useContext, useReducer} from 'react'; export const StoreContext = createContext(); -export const StoreProvider = ( { reducer, initialState, children } ) =>( - - { children } - +export const StoreProvider = ({reducer, initialState, children}) => ( + {children} ); -export const useStoreValue = () => useContext( StoreContext ); +export const useStoreValue = () => useContext(StoreContext); diff --git a/assets/src/js/admin/reports/widget.js b/assets/src/js/admin/reports/widget.js index 733e5cce9d..6174d7b19d 100644 --- a/assets/src/js/admin/reports/widget.js +++ b/assets/src/js/admin/reports/widget.js @@ -7,32 +7,33 @@ import moment from 'moment'; // Reports widget import Widget from './widget/index.js'; -import { StoreProvider } from './store'; -import { reducer } from './store/reducer'; +import {StoreProvider} from './store'; +import {reducer} from './store/reducer'; // Utils -import { getWindowData } from './utils'; +import {getWindowData} from './utils'; const initialState = { - // Initial period range (defaults to the past week) - period: { - startDate: moment().subtract( 7, 'days' ), - endDate: moment(), - range: 'week', - }, - pageLoaded: false, - giveStatus: null, - currency: getWindowData( 'currency' ), - testMode: getWindowData( 'testMode' ), + // Initial period range (defaults to the past week) + period: { + startDate: moment().subtract(7, 'days'), + endDate: moment(), + range: 'week', + }, + pageLoaded: false, + giveStatus: null, + currency: getWindowData('currency'), + testMode: getWindowData('testMode'), + assetsUrl: getWindowData('assetsUrl'), }; -const container = document.getElementById( 'givewp-reports-widget' ); +const container = document.getElementById('givewp-reports-widget'); -if ( container ) { - ReactDOM.render( - - - , - document.getElementById( 'givewp-reports-widget' ) - ); +if (container) { + ReactDOM.render( + + + , + document.getElementById('givewp-reports-widget') + ); } diff --git a/assets/src/js/admin/reports/widget/index.js b/assets/src/js/admin/reports/widget/index.js index 56fbf38cb7..197f3ec14b 100644 --- a/assets/src/js/admin/reports/widget/index.js +++ b/assets/src/js/admin/reports/widget/index.js @@ -1,10 +1,10 @@ // Reports admin dashboard widget // Dependencies -import { __ } from '@wordpress/i18n' +import {__} from '@wordpress/i18n'; // Store-related dependencies -import { useStoreValue } from '../store'; +import {useStoreValue} from '../store'; import './style.scss'; @@ -13,58 +13,71 @@ import Grid from '../components/grid'; import Card from '../components/card'; import RESTChart from '../components/rest-chart'; import RESTMiniChart from '../components/rest-mini-chart'; -import NoDataNotice from '../components/no-data-notice'; import LoadingNotice from '../components/loading-notice'; import MiniPeriodSelector from '../components/mini-period-selector'; const Widget = () => { - const [ { giveStatus, pageLoaded } ] = useStoreValue(); + const [{giveStatus, pageLoaded}] = useStoreValue(); - return ( -
- { giveStatus === 'no_donations_found' && ( - - ) } - { pageLoaded === false && ( - - ) } - - - } - type="line" - aspectRatio={ 0.8 } - endpoint="income" - showLegend={ false } - /> - - - - - - - - - - - - - - -
- ); + return ( +
+ {giveStatus === 'no_donations_found' && } + {pageLoaded === false && } + + + } + type="line" + aspectRatio={0.8} + endpoint="income" + showLegend={false} + /> + + + + + + + + + + + + + + +
+ ); }; + +/** + * @since 2.29.1 + */ +function RecurringAddonOverlay() { + const [{assetsUrl}] = useStoreValue(); + + return ( +
+
+

+ {__('Get a quick view of your donation activity', 'give')} +

+

{__("You don't have any donations yet", 'give')}

+

+ {__( + 'Boost your fundraising by over 30% with our improved recurring add-on and start collecting donations effortlessly on your website.', + 'give' + )} +

+ + + {'external + {__('Get more donations', 'give')} + +
+
+ ); +} + export default Widget; diff --git a/assets/src/js/admin/reports/widget/style.scss b/assets/src/js/admin/reports/widget/style.scss index e07c446672..1618383942 100644 --- a/assets/src/js/admin/reports/widget/style.scss +++ b/assets/src/js/admin/reports/widget/style.scss @@ -1,21 +1,86 @@ .givewp-reports-widget-container { - position: relative; - height: auto; - width: 100%; + position: relative; + height: auto; + width: 100%; } #givewp_reports_widget { - background: rgb(249, 249, 249); + background: rgb(249, 249, 249); - .inside { - margin-top: 0; - } + .inside { + margin-top: 0; + padding: 0; + } } a.givewp-reports-link { - float: right; - height: 100%; - font-size: 14px; - text-decoration: none !important; - margin: 0; + float: right; + height: 100%; + font-size: 14px; + text-decoration: none !important; + margin: 0; +} + + +#dashboard-widgets { + .givewp-reports-widget-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100%; + min-width: 100%; + background: rgba(229, 229, 229, 0.45); + z-index: 999; + } + + .givewp-reports-widget-overlay-content { + display: flex; + flex-direction: column; + gap: 1.25rem; + background: #ffffff; + width: 20rem; + padding: 1.5rem; + box-shadow: 0px 4px 8px rgba(14, 14, 14, 0.15); + border-radius: 4px; + font-family: 'SF Pro Text', sans-serif; + + &-title { + text-align: center; + font-size: 1.125rem; + font-weight: 700; + line-height: 1.5rem; + color: #0E0E0E; + padding: 0 1rem; + margin: 0; + } + + p { + flex-grow: 1; + padding: 0; + margin: 0; + font-size: 0.8125rem; + font-weight: 500; + color: #404040; + line-height: 20px; + } + + a { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5625rem; + background: #459948; + cursor: pointer; + color: #F2F9FF; + padding: .5rem 1rem; + text-decoration: none; + font-weight: 500; + } + } } diff --git a/give.php b/give.php index b2a95ac717..1d0107ec5d 100644 --- a/give.php +++ b/give.php @@ -6,7 +6,7 @@ * Description: The most robust, flexible, and intuitive way to accept donations on WordPress. * Author: GiveWP * Author URI: https://givewp.com/ - * Version: 2.29.0 + * Version: 2.29.1 * Requires at least: 5.0 * Requires PHP: 7.0 * Text Domain: give @@ -316,7 +316,7 @@ private function setup_constants() { // Plugin version. if (!defined('GIVE_VERSION')) { - define('GIVE_VERSION', '2.29.0'); + define('GIVE_VERSION', '2.29.1'); } // Plugin Root File. diff --git a/readme.txt b/readme.txt index 2055ace3ca..97c2519303 100644 --- a/readme.txt +++ b/readme.txt @@ -5,7 +5,7 @@ Tags: donation, donate, recurring donations, fundraising, crowdfunding Requires at least: 5.0 Tested up to: 6.2 Requires PHP: 7.0 -Stable tag: 2.29.0 +Stable tag: 2.29.1 License: GPLv3 License URI: http://www.gnu.org/licenses/gpl-3.0.html @@ -258,6 +258,9 @@ The 2% fee on Stripe donations only applies to donations taken via our free Stri 8. GiveWP has a dedicated support team to help answer any questions you may have and help you through stumbling blocks. == Changelog == += 2.29.1: June 21st, 2023 = +* Feature: Add Recurring Donations add-on overlay to Reports widget + = 2.29.0: June 14th, 2023 = * Feature: A refund checkbox can be enabled on the admin screen. * Enhancement: PayPal Donations onboarding validates only the PayPal seller capabilities that block payment processing. diff --git a/src/Views/Admin/DashboardWidgets/Reports.php b/src/Views/Admin/DashboardWidgets/Reports.php index 483bd957d3..a9f3a29a7a 100644 --- a/src/Views/Admin/DashboardWidgets/Reports.php +++ b/src/Views/Admin/DashboardWidgets/Reports.php @@ -15,7 +15,6 @@ */ class Reports { - /** * Initialize Reports Dashboard Widget */ @@ -25,12 +24,8 @@ public function init() add_action('admin_enqueue_scripts', [$this, 'enqueue_scripts']); } - public function __construct() - { - // Do nothing - } - // Add dashboard widget + public function add_dashboard_widget() { $reportsURL = admin_url('/edit.php?post_type=give_forms&page=give-reports'); @@ -73,15 +68,11 @@ public function enqueue_scripts($base) 'allTimeStart' => $this->get_all_time_start(), 'currency' => give_get_currency(), 'testMode' => give_is_test_mode(), + 'assetsUrl' => GIVE_PLUGIN_URL . 'assets/dist', ] ); } - public function render_template() - { - include_once GIVE_PLUGIN_DIR . 'src/Views/Admin/DashboardWidgets/templates/reports-template.php'; - } - public function get_all_time_start() { $start = date_create('01/01/2015'); @@ -103,4 +94,9 @@ public function get_all_time_start() return isset($donations[0]) ? $donations[0]->date : $start->format('Y-m-d H:i:s'); } + + public function render_template() + { + include_once GIVE_PLUGIN_DIR . 'src/Views/Admin/DashboardWidgets/templates/reports-template.php'; + } }