feat: add notices for offload restriction and upgrade

Author: Soare-Robert-Daniel

assets/src/dashboard/parts/components/Modal.js

@@ -4,7 +4,7 @@ import { close } from '@wordpress/icons';
 import { useViewportMatch } from '@wordpress/compose';
 import { Button, Icon, Modal as CoreModal } from '@wordpress/components';
 
-export default function Modal({	icon, labels = {}, onRequestClose = () => {}, onConfirm = () => {}, variant = 'default', onSecondaryAction = () => {} }) {
+export default function Modal({	icon, labels = {}, onRequestClose = () => {}, onConfirm = () => {}, variant = 'default', onSecondaryAction = () => {}, afterContentChildren = null }) {
 
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 
@@ -53,6 +53,7 @@ export default function Modal({	icon, labels = {}, onRequestClose = () => {}, on
 					className="text-center mx-0 my-4 text-gray-700"
 					dangerouslySetInnerHTML={ { __html: labels.description } }
 				/>
+				{ afterContentChildren }
 				<div class="flex gap-4">
 					<Button variant="primary" className={ actionButtonClasses } onClick={ onConfirm }>
 						{ labels.action }

assets/src/dashboard/parts/connected/settings/OffloadMedia.js

@@ -2,7 +2,7 @@
 
 import classnames from 'classnames';
 import { useEffect, useState } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useMemo } from '@wordpress/data';
 import { Icon } from '@wordpress/icons';
 
 import { warning, rollback as rollbackIcon, offload, warningAlt, sync } from '../../../utils/icons';
@@ -37,7 +37,9 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 		processedImages,
 		offloadFinishNotice,
 		offloadLimitReached,
-		offloadLimit
+		offloadLimit,
+		canUseMediaOffloading,
+		isMediaOffloadingLegacyFreeUser
 	} = useSelect( select => {
 		const {
 			getOffloadConflicts,
@@ -51,9 +53,14 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 			getQueryArgs,
 			isLoading,
 			getSiteSettings,
-			getOffloadLimit
+			getOffloadLimit,
+			getUserData
 		} = select( 'optimole' );
 
+		const userData = getUserData();
+		const canUseMediaOffloading = Boolean( userData?.can_use_offloading );
+		const isMediaOffloadingLegacyFreeUser = Boolean( userData?.is_legacy_offloading_free_user );
+
 		return {
 			offloadConflicts: getOffloadConflicts(),
 			errorMedia: getErrorMedia(),
@@ -67,7 +74,9 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 			processedImages: getProcessedImages(),
 			offloadFinishNotice: getSiteSettings( 'show_offload_finish_notice' ),
 			offloadLimitReached: 'enabled' === getSiteSettings( 'offload_limit_reached' ),
-			offloadLimit: getOffloadLimit()
+			offloadLimit: getOffloadLimit(),
+			canUseMediaOffloading,
+			isMediaOffloadingLegacyFreeUser
 		};
 	}, []);
 
@@ -84,6 +93,9 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 	const isOffloadingInProgress = 'disabled' !== settings['offloading_status'];
 	const isRollbackInProgress = 'disabled' !== settings['rollback_status'];
 
+	const showDisabledOffloadingNotice = useMemo( () => {
+		return ! canUseMediaOffloading && isMediaOffloadingLegacyFreeUser && 'enabled' === settings?.['offload_media'];
+	}, [ settings, canUseMediaOffloading, isMediaOffloadingLegacyFreeUser ]);
 
 	useEffect( () => {
 		if ( isOffloadingInProgress ) {
@@ -181,14 +193,24 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 			[MODAL_STATE_OFFLOAD]: {
 				icon: offload,
 				onConfirm: () => {
-					onOffloadMedia();
+					if ( canUseMediaOffloading ) {
+						onOffloadMedia();
+					} else {
+						window.open( optimoleDashboardApp.optimoleHome +  'pricing', '_blank' );
+					}
 					setModal( null );
 				},
 				labels: {
 					title: options_strings.offloading_start_title,
 					description: options_strings.offloading_start_description,
-					action: options_strings.offloading_start_action
-				}
+					action: canUseMediaOffloading ? options_strings.offloading_start_action : optimoleDashboardApp.strings.upgrade.title_long
+				},
+				afterContentChildren: ! canUseMediaOffloading && (
+					<Notice
+						type="warning"
+						text={options_strings.upgrade_to_use_offloading_notice_desc}
+					/>
+				)
 			},
 			[MODAL_STATE_ROLLBACK]: {
 				icon: rollbackIcon,
@@ -297,6 +319,16 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 			<h1 className="text-xl font-bold">{options_strings.enable_offload_media_title}</h1>
 			<p dangerouslySetInnerHTML={{ __html: options_strings.enable_offload_media_desc }}/>
 
+			{
+				showDisabledOffloadingNotice && (
+					<Notice
+						type="warning"
+						title={options_strings.plan_update_notice_title}
+						text={options_strings.plan_update_notice_desc}
+					/>
+				)
+			}
+
 			{offloadFinishNotice && (
 				<Notice
 					title={'offload' === offloadFinishNotice ? options_strings.offloading_success : options_strings.rollback_success }

inc/admin.php

@@ -2038,6 +2038,9 @@ private function get_dashboard_strings() {
 				'exceed_plan_quota_notice_description' => sprintf( /* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */ __( 'Based on this trend, you are likely to exceed your free quota before the month ends. To avoid any disruption in service, we strongly recommend %1$supgrading%2$s your plan or waiting until your traffic stabilizes before offloading your images. Do you still wish to proceed?', 'optimole-wp' ), '<a style="white-space: nowrap;" target=”_blank” href="https://dashboard.optimole.com/settings/billing/">', '</a>' ),
 				'exceed_plan_quota_notice_start_action' => __( 'Yes, Transfer to Optimole Cloud', 'optimole-wp' ),
 				'exceed_plan_quota_notice_secondary_action' => __( 'No, keep images on my website', 'optimole-wp' ),
+				'plan_update_notice_title'                  => __( 'Plan Update', 'optimole-wp' ),
+				'plan_update_notice_desc'                   => __( 'We\'ve changed how plans work. Users on Optimole Free plan can not offload new image. Existing images that are already offloaded will remain offloaded.', 'optimole-wp' ),
+				'upgrade_to_use_offloading_notice_desc'     => __( 'Offloading images is a PRO feature. Please upgrade your plan to enable image transfer to Optimole Cloud.', 'optimole-wp' ),
 			],
 			'help'                           => [
 				'section_one_title'           => __( 'Help and Support', 'optimole-wp' ),