Display warning popup before offloading

Author: girishpanchal30

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' }) {
+export default function Modal({	icon, labels = {}, onRequestClose = () => {}, onConfirm = () => {}, variant = 'default', onAction2 = () => {} }) {
 
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 
@@ -19,7 +19,7 @@ export default function Modal({	icon, labels = {}, onRequestClose = () => {}, on
 		{
 			'bg-mango-yellow': 'warning' === variant
 		},
-		'optml__button flex justify-center px-5 py-3 rounded font-bold min-h-40 basis-1/5'
+		'inline-flex optml__button flex justify-center px-5 py-3 rounded font-bold min-h-40 basis-1/5'
 	);
 
 	return (
@@ -53,10 +53,16 @@ export default function Modal({	icon, labels = {}, onRequestClose = () => {}, on
 					className="text-center mx-0 my-4 text-gray-700"
 					dangerouslySetInnerHTML={ { __html: labels.description } }
 				/>
-
-				<Button variant="primary" className={ actionButtonClasses } onClick={ onConfirm }>
-					{ labels.action }
-				</Button>
+				<div class="flex gap-4">
+					<Button variant="primary" className={ actionButtonClasses } onClick={ onConfirm }>
+						{ labels.action }
+					</Button>
+					{ labels.action2 && (
+						<Button variant="link" className={ actionButtonClasses } onClick={ onAction2 }>
+							{ labels.action2 }
+						</Button>
+					) }
+				</div>
 			</div>
 		</CoreModal>
 	);

assets/src/dashboard/parts/connected/dashboard/index.js

@@ -80,17 +80,6 @@ const ActivatedNotice = () => (
 	</div>
 );
 
-const ExceedPlanQuotaWarning = () => (
-	<div className="flex gap-2 bg-warning text-danger border border-solid border-danger rounded relative px-6 py-5 mb-5">
-		<Icon icon="warning" />
-
-		<p
-			className="m-0"
-			dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.exceed_plan_quota_notice } }
-		/>
-	</div>
-);
-
 const Dashboard = () => {
 	const {
 		userData,
@@ -142,7 +131,6 @@ const Dashboard = () => {
 	return (
 		<div className="bg-white p-8 border-0 rounded-lg shadow-md">
 			{ ( 0 < optimoleDashboardApp.strings.notice_just_activated.length && 'active' === userStatus ) && <ActivatedNotice/> }
-			{ ( 0 < optimoleDashboardApp.strings.exceed_plan_quota_notice.length && 'active' === userStatus ) && <ExceedPlanQuotaWarning/> }
 
 			{ 'inactive' === userStatus && <InactiveWarning/> }
 

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

@@ -14,13 +14,15 @@ import Modal from '../../components/Modal';
 import Logs from './Logs';
 
 const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
-	const { strings, cron_disabled } = optimoleDashboardApp;
+	const { strings, cron_disabled, show_exceed_plan_quota_notice } = optimoleDashboardApp;
+
 	const { conflicts, options_strings } = strings;
 
 	const MODAL_STATE_OFFLOAD = 'offload';
 	const MODAL_STATE_ROLLBACK = 'rollback';
 	const MODAL_STATE_STOP_OFFLOAD = 'stopOffload';
 	const MODAL_STATE_STOP_ROLLBACK = 'stopRollback';
+	const MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE = 'planQuotaNotice';
 
 	const {
 		offloadConflicts,
@@ -181,12 +183,12 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 		setCanSave( true );
 
 		if ( offloadEnabled ) {
-			setModal( MODAL_STATE_OFFLOAD );
+			setModal( show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_OFFLOAD );
 
 			return;
 		}
 
-		setModal( MODAL_STATE_ROLLBACK );
+		setModal( show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_ROLLBACK );
 	};
 
 	const getModalProps = ( type ) => {
@@ -245,6 +247,29 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 					description: options_strings.rollback_stop_description,
 					action: options_strings.rollback_stop_action
 				}
+			},
+			[MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE]: {
+				variant: 'warning',
+				icon: warningAlt,
+				onConfirm: () => {
+					onOffloadMedia();
+					setModal( null );
+				},
+				onAction2: () => {
+					setModal( null );
+					const options = settings;
+					options.offload_media = 'disabled';
+					saveSettings( options );
+
+					// Remove "unsaved changes" warning
+					window.onbeforeunload = null;
+				},
+				labels: {
+					title: options_strings.exceed_plan_quota_notice_title,
+					description: options_strings.exceed_plan_quota_notice_description,
+					action: options_strings.exceed_plan_quota_notice_start_action,
+					action2: options_strings.exceed_plan_quota_notice_start_action2
+				}
 			}
 		};
 
@@ -270,11 +295,11 @@ const OffloadMedia = ({ settings, canSave, setSettings, setCanSave }) => {
 		e.preventDefault();
 
 		if ( 'offload' === radioBoxValue ) {
-			setModal( MODAL_STATE_OFFLOAD );
+			setModal( show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_OFFLOAD );
 		}
 
 		if ( 'rollback' === radioBoxValue ) {
-			setModal( MODAL_STATE_ROLLBACK );
+			setModal( show_exceed_plan_quota_notice ? MODAL_STATE_EXCEED_PLAN_QUOTA_NOTICE : MODAL_STATE_ROLLBACK );
 		}
 	};
 

inc/admin.php

@@ -1340,6 +1340,7 @@ private function localize_dashboard_app() {
 				],
 			],
 			'bf_notices'                 => $this->get_bf_notices(),
+			'show_exceed_plan_quota_notice' => $this->should_show_exceed_quota_warning(),
 		];
 	}
 
@@ -1537,14 +1538,6 @@ private function get_dashboard_strings() {
 				'</b>',
 				'<br>'
 			),
-			'exceed_plan_quota_notice'       => $this->should_show_exceed_quota_warning() ?
-				sprintf(
-				/* translators: 1 starting bold tag, 2 is the ending bold tag */
-					__( '%1$sYour site has already reached over 50%% of your monthly visits limit within just two weeks.%2$s <br/> 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 upgrading your plan or waiting until your traffic stabilizes before offloading your images. Do you still wish to proceed?', 'optimole-wp' ),
-					'<strong>',
-					'</strong>'
-				)
-				: '',
 			'signup_terms'                   => sprintf(
 			/* translators: 1 is starting anchor tag to terms, 2 is starting anchor tag to privacy link and 3 is ending anchor tag. */
 				__( 'By signing up, you agree to our  %1$sTerms of Service %3$s and %2$sPrivacy Policy %3$s.', 'optimole-wp' ),
@@ -1892,6 +1885,10 @@ private function get_dashboard_strings() {
 				'rollback_stop_title'                 => __( 'Are you sure?', 'optimole-wp' ),
 				'rollback_stop_description'           => __( 'Canceling will halt the ongoing process, and any remaining images will stay in the Optimole Cloud. To transfer images to the Optimole Cloud, use the Offloading option.', 'optimole-wp' ),
 				'rollback_stop_action'                => __( 'Cancel the transfer from Optimole', 'optimole-wp' ),
+				'exceed_plan_quota_notice_title'      => __( 'Your site has already reached over 50% of your monthly visits limit within just two weeks.', 'optimole-wp' ),
+				'exceed_plan_quota_notice_description' => __( '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 upgrading your plan or waiting until your traffic stabilizes before offloading your images. Do you still wish to proceed?', 'optimole-wp' ),
+				'exceed_plan_quota_notice_start_action' => __( 'Yes, Transfer to Optimole Cloud', 'optimole-wp' ),
+				'exceed_plan_quota_notice_start_action2' => __( 'No', 'optimole-wp' ),
 			],
 			'help'                           => [
 				'section_one_title'           => __( 'Help and Support', 'optimole-wp' ),