CFP-25 - Feature: Autosave functionality for custom font.

admin/dashboard/assets/src/common/all-config.scss

@@ -67,9 +67,89 @@ button.bcf-save-font[disabled] {
     display: none;
 }
 .bsf-cf-menu-page-wrapper {
-	font-family: 'Inter';
-	font-style: normal;
+    font-family: 'Inter';
+    font-style: normal;
+
+    .snack-bar-saved {
+        .components-snackbar {
+            background-color: #ffffff;
+            color: #3C434A;
+            font-size: 12px;
+            border-left: 5px solid #00A32A;
+            animation-name: slideIn;
+            animation-duration: 0.5s;
+            animation-timing-function: ease;
+            animation-fill-mode: forwards;
+            padding: 10px 50px 10px 10px;
+            position: fixed;
+            top: 7%;
+            left: 55% !important;
+        }
+    }
+}
+
+/* New styles for the added notification */
+    .snack-bar-added .components-snackbar {
+    background-color: #ffffff;
+    color: #3C434A;
+    font-size: 12px;
+    border-left: 5px solid #00A32A;
+    animation-name: slideIn;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+    padding: 10px 50px 10px 10px;
+    position: fixed;
+    top: 6%;
+    left: 55%;
+}
+
+/* New styles for the removed notification */
+.snack-bar-removed .components-snackbar {
+    background-color: #ffffff;
+    color: #3C434A;
+    border-left: 5px solid rgb(185, 3, 3);
+    font-size: 12px;
+    animation-name: slideIn;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+    padding: 10px 50px 10px 10px;
+    position: fixed;
+    top: 7%;
+    left: 55%;
+}
+
+.bcf-edit-dialog-panel .snack-bar-added .components-snackbar, .bcf-edit-dialog-panel .snack-bar-removed .components-snackbar {
+    bottom: 12% !important;
+    animation-duration: 1s;
+    animation-name: slideInSmall;
+    top: 80%;
+}
+
+@keyframes slideIn {
+    0% {
+        top: -100%;
+    }
+
+    100% {
+        top: 6%;
+    }
 }
+
+@keyframes slideInSmall {
+    0% {
+        left: -100%;
+    }
+
+    100% {
+        left: 2%;
+    }
+}
+.text-primary{
+    color: #3858E9;
+}
+
 .appearance_page_bsf-custom-fonts #wpcontent {
 	padding-left: 0;
 }
@@ -194,3 +274,30 @@ span.font-filename {
     font-weight: 500;
     margin-left: 20px;
 }
+
+
+.plus-icon {
+    width: 16px;
+    height: 16px;
+    fill: #007CBA; /* Change to your desired color */
+  }
+
+  .loading-icon {
+    width: 16px;
+    height: 16px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  #add-font-container .border-b-primary, #add-font-container .border-b-2:hover {
+    border-bottom-color: #3858E9;
+  }
+
+
+  .disabled-svg {
+    fill: gray;
+  }

admin/dashboard/assets/src/dashboard-app/pages/fonts/AddFont.js

@@ -23,10 +23,7 @@ const AddFont = () => {
 					{/* Here will be Nav Section */}
 					<div className="flex items-center mb-5 border-b border-light">
 						<Link
-							to={{
-								pathname: "themes.php",
-								search: `?page=bsf-custom-fonts`,
-							}}
+							onClick={() => window.location = `${ bsf_custom_fonts_admin.app_base_url }`}
 							className="mr-4 cursor-pointer py-3 px-0 focus:shadow-none focus:outline-none"
 						>
 							<svg

admin/dashboard/assets/src/dashboard-app/pages/fonts/GoogleFont.js

@@ -1,13 +1,16 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { useDispatch } from 'react-redux';
 import { __ } from "@wordpress/i18n";
 import { useSelector } from 'react-redux';
 import apiFetch from '@wordpress/api-fetch';
+import { editFontToDB, deleteFontFromDB, addFontToDB } from "../../../utils/useApis";
+import { Snackbar } from "@wordpress/components";
 
 const GoogleVariationItem = ({
 	id,
 	variation,
-	handleVariationRemove
+	handleVariationRemove,
+	disable
 }) => {
 	const getFontWeightTitle = ( weight ) => {
 		if ( undefined === weight ) {
@@ -54,6 +57,8 @@ const GoogleVariationItem = ({
 		}
 	}
 
+	const doNothing = () => {};
+
 	return (
 		<div key={id} className="flex items-center justify-between">
 			<div className="text-sm font-normal text-heading">
@@ -69,7 +74,7 @@ const GoogleVariationItem = ({
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 					onClick={() =>
-						handleVariationRemove(variation.id)
+						disable ? doNothing() : handleVariationRemove(variation.id)
 					}
 				>
 					<path
@@ -84,14 +89,50 @@ const GoogleVariationItem = ({
 
 const GoogleFont = () => {
 	const googleFontData = useSelector( ( state ) => state.googleFont );
+	const isDbUpdateRequired = useSelector( ( state ) => state.isDbUpdateRequired);
+	const editType = useSelector( ( state ) => state.editType);
+	const fontsData = useSelector((state) => state.fonts);
 
 	const googleFonts = bsf_custom_fonts_admin.googleFonts;
 	const dispatch = useDispatch();
 	const [gFont, setGFont] = useState('');
 	const [ addingFont, setAddingFont ] = useState( false );
+	const [fontId, setFontId] = useState(null);
+	const [showMessage, setShowMessage] = useState('');
+
+	const fontUpdated = (operationType, fId) => {
+		let message;
+		switch (operationType) {
+			case 'add':
+				message = __( 'Font Added Successfully!', 'custom-fonts' );
+				break;
+			case 'edit':
+				if(editType === 'remove') message = __( 'Variation Removed Successfully!', 'custom-fonts' );
+				else message = __( 'Variation Added Successfully!', 'custom-fonts' );
+				break;
+			case 'delete':
+				message = __( 'Font Removed Successfully!', 'custom-fonts' );
+				setFontId(null);
+				break;
+			default:
+				message = '';
+		}
+
+		if (fId) setFontId(fId);
+		setShowMessage(message);
+		setTimeout(() => setShowMessage(''), 5000);	
+	}
+
+	useEffect(() => {
+		if (isDbUpdateRequired && googleFontData) {
+			if (fontId) googleFontData.variations.length !== 0 ? editFontToDB(dispatch, fontId, googleFontData, () => { fontUpdated('edit') }) : deleteFontFromDB(dispatch, fontId, () => { fontUpdated('delete') });
+			else googleFontData.variations.length === 1 ? addFontToDB(dispatch, googleFontData, (fId) => { fontUpdated('add', fId) }) : null;
+		}
+	}, [isDbUpdateRequired])
 
-	function handleGoogleFontChange( e ) {
-		setGFont( e.target.value );
+	function handleGoogleFontChange(e) {
+		setGFont(e.target.value);
+		setFontId(null);
 
 		const changeEvent = new CustomEvent( 'bcf:googleFontSelection:change', {
 			bubbles: true,
@@ -118,38 +159,7 @@ const GoogleFont = () => {
 			"font_display": googleFontData.font_display ? googleFontData.font_display : '',
 			"variations": updatedVariations
 		} } );
-	};
-
-	const insertGoogleFontPost = ( e ) => {
-		e.preventDefault();
-
-		if ( '' === googleFontData.font_name ) {
-			window.alert(
-				__( 'Make sure to provide valid details.', 'custom-fonts' )
-			);
-			return;
-		}
-
-		setAddingFont( 'loading' );
-		const formData = new window.FormData();
-
-		formData.append( 'action', 'bcf_add_new_google_font' );
-		formData.append( 'security', bsf_custom_fonts_admin.add_font_nonce );
-		formData.append( 'font_type', 'google' );
-		formData.append( 'font_data', JSON.stringify( googleFontData ) );
-
-		apiFetch( {
-			url: bsf_custom_fonts_admin.ajax_url,
-			method: 'POST',
-			body: formData,
-		} ).then( (response) => {
-			if ( response.success ) {
-				setTimeout( () => {
-					window.location = `${ bsf_custom_fonts_admin.app_base_url }`;
-				}, 500 );
-			}
-			setAddingFont( false );
-		} );
+		dispatch( { type: 'IS_DB_UPDATE_REQUIRED', payload: {isDbUpdateRequired: true, editType:'remove'} } );
 	};
 
 	return (
@@ -185,27 +195,16 @@ const GoogleFont = () => {
 									key={variation.id+1}
 									variation={variation}
 									handleVariationRemove={handleVariationRemove}
+									disable = {isDbUpdateRequired}
 								/>
 							))}
 						</div>
 					</div>
 				}
-				<div className="my-5">
-					<button
-						type="button"
-						className="bcf-save-font inline-flex components-button is-primary"
-						onClick={ insertGoogleFontPost }
-						disabled={'loading' === addingFont ? true : false}
-					>
-						{__( 'Save Font', 'custom-fonts' )}
-						{ 'loading' === addingFont && (
-							<svg className="animate-spin -mr-1 ml-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-								<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-								<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-							</svg>
-						) }
-					</button>
+				{showMessage.length > 0 ? <div className={showMessage.length > 0 ? `snack-bar-${showMessage.toLowerCase().includes('added') || showMessage.toLowerCase().includes('updated') ? 'added' : 'removed'}` : ''}>
+					<Snackbar>{showMessage}</Snackbar>
 				</div>
+					: null}
 			</div>
 		</div>
 	);

admin/dashboard/assets/src/dashboard-app/pages/fonts/LocalFont.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { __ } from "@wordpress/i18n";
 import { useDispatch } from 'react-redux';
 import apiFetch from '@wordpress/api-fetch';
+import { Snackbar } from "@wordpress/components";
 
 const LocalVariationItem = ({
 	id,
@@ -242,6 +243,7 @@ const LocalVariationItem = ({
 
 const LocalFont = () => {
 	const [advanceTab, setAdvanceTab] = useState(false);
+	const [showMessage, setShowMessage] = useState('');
 	const dispatch = useDispatch();
 	const toggleAdvanceTab = () => {
 		setAdvanceTab(!advanceTab);
@@ -266,6 +268,12 @@ const LocalFont = () => {
 		dispatch( { type: 'SET_LOCAL_FONT', payload: localFontData } );
 	}, [localFontData]);
 
+	const fontUpdated = (message, fId) => {
+		if(fId) setFontId(fId);
+		setShowMessage(message);
+		setTimeout(() => setShowMessage(''), 5000);
+	}
+
 	const handleInputChange = (event, property) => {
 		const value = event.target.value;
 
@@ -358,9 +366,7 @@ const LocalFont = () => {
 			body: formData,
 		} ).then( (response) => {
 			if ( response.success ) {
-				setTimeout( () => {
-					window.location = `${ bsf_custom_fonts_admin.app_base_url }`;
-				}, 500 );
+				fontUpdated('Variation Added Successfully!');
 			}
 			setAddingFont( false );
 		} );
@@ -526,6 +532,7 @@ const LocalFont = () => {
 						</svg>
 					) }
 				</button>
+				{showMessage.length>0 ? <div className="snack-bar-saved"><Snackbar>{showMessage}</Snackbar></div> : null}
 			</div>
 		</div>
 	);

admin/dashboard/assets/src/dashboard-app/pages/fonts/edit/EditFont.js

@@ -6,6 +6,8 @@ import EditGoogleFont from "./EditGoogleFont";
 import { RangeControl } from "@wordpress/components";
 import EditGooglePreviewItem from "./preview/EditGooglePreviewItem";
 import EditLocalPreviewItem from "./preview/EditLocalPreviewItem";
+import globalDataStore from '@Admin/store/globalDataStore';
+import setInitialState  from '@Utils/setInitialState';
 
 const EditFont = ( props ) => {
 	const {
@@ -18,16 +20,22 @@ const EditFont = ( props ) => {
 
 	const [ open, setOpen ] = useState( openPopup );
 	const [ previewSize, setPreviewSize ] = useState( '20' );
+	const [fontUpdateAction, setFontUpdateAction] = useState('');
 	const cancelButtonRef = useRef( null );
 
 	const onCancelClick = () => {
 		setOpenPopup( ! openPopup );
+		setInitialState( globalDataStore );
 	};
 
 	useEffect( () => {
 		setOpen( openPopup );
 	}, [ openPopup ] );
 
+	const onFontUpdated = (action) => {
+		setFontUpdateAction(action);
+	}
+
 	return (
 		<Transition.Root show={ open } as={ Fragment }>
 			<Dialog as="div" className="ast-edit-font__dialog fixed backdrop-blur-sm inset-0 overflow-y-auto" initialFocus={ cancelButtonRef } onClose={ onCancelClick }>
@@ -76,7 +84,7 @@ const EditFont = ( props ) => {
 								<div className="col-span-4 bg-white px-4 pt-5 pb-4 lg:p-[2em] sm:p-6">
 									<div>
 										{fontType === "local" && <EditLocalFont fontId={font} fontName={fontName} />}
-										{fontType === "google" && <EditGoogleFont fontId={font} fontName={fontName} />}
+										{fontType === "google" && <EditGoogleFont fontId={font} fontName={fontName} fontUpdateAction={fontUpdateAction} setFontUpdateAction={setFontUpdateAction} />}
 									</div>
 								</div>
 								<div className="col-span-8 bg-[#F6F7F7] px-4 pt-5 pb-4 lg:p-[2em] sm:p-6">
@@ -98,7 +106,7 @@ const EditFont = ( props ) => {
 									<div className="py-5 divide-y">
 										<div>
 											{fontType === "local" && <EditLocalPreviewItem fontId={font} fontName={fontName} />}
-											{fontType === "google" && <EditGooglePreviewItem fontId={font} fontName={fontName} />}
+											{fontType === "google" && <EditGooglePreviewItem fontId={font} fontName={fontName} onFontUpdated={onFontUpdated}/>}
 										</div>
 									</div>
 								</div>