Skip to content

Commit a2c9ab3

Browse files
authored
Merge pull request #138 from brainstormforce/bsf-analytics-toggle-added
AST-4592 - Feat - Bsf analytics uses tracking toggle added.
2 parents 14aa223 + d291a6c commit a2c9ab3

6 files changed

Lines changed: 410 additions & 63 deletions

File tree

README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
**Tags:** fonts, custom fonts, Google Fonts, performance, full site editing
55
**Requires at least:** 5.0
66
**Tested up to:** 6.7
7-
**Stable tag:** 2.1.11
7+
**Stable tag:** 2.1.12
88
**License:** GPLv2 or later
99
**License URI:** http://www.gnu.org/licenses/gpl-2.0.html
1010

@@ -151,6 +151,9 @@ Yes, Custom Fonts is completely free to use, without any limitation.
151151

152152

153153
## Changelog ##
154+
### 2.1.12 ###
155+
- Improved Usage Tracking option with a new toggle switch design while keeping all existing features.
156+
154157
### 2.1.11 ###
155158
- Added logic to generate and enqueue a local CSS file for downloaded Google Fonts, ensuring they load in both the editor and frontend to support inline font styles.
156159

admin/dashboard/assets/src/dashboard-app/pages/welcome/Settings.js

Lines changed: 250 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,274 @@
1-
import React, { useState } from "react";
2-
import { __ } from "@wordpress/i18n";
3-
import { Switch } from '@headlessui/react';
4-
import apiFetch from '@wordpress/api-fetch';
5-
import { useSelector, useDispatch } from 'react-redux';
1+
import React, { useState, useEffect } from "react";
2+
import { __, sprintf } from "@wordpress/i18n";
3+
import { Switch } from "@headlessui/react";
4+
import apiFetch from "@wordpress/api-fetch";
5+
import { useSelector, useDispatch } from "react-redux";
66

77
const Settings = () => {
8-
const preloading = useSelector( ( state ) => state.optionPreload );
9-
const [isChecked, updateCheck] = useState( '1' === preloading || true === preloading ? true : false );
8+
const preloading = useSelector((state) => state.optionPreload);
9+
const [isPreloadingChecked, setPreloadingChecked] = useState(
10+
"1" === preloading || true === preloading
11+
);
12+
const [preloadFeedback, setPreloadFeedback] = useState(null);
1013
const dispatch = useDispatch();
1114

12-
const preloadingUpdate = () => {
13-
updateCheck( ! isChecked );
15+
const [isTrackingChecked, setTrackingChecked] = useState(false);
16+
const [isMultisite, setIsMultisite] = useState(false);
17+
const [trackingFeedback, setTrackingFeedback] = useState(null);
18+
const [docLink, setDocLink] = useState(
19+
"https://store.brainstormforce.com/usage-tracking/"
20+
);
21+
const [isWhiteLabel, setIsWhiteLabel] = useState(false);
22+
23+
const author = "Brainstorm Force";
24+
25+
useEffect(() => {
26+
apiFetch({
27+
path: "/custom-fonts/v1/get-tracking-status",
28+
})
29+
.then((response) => {
30+
setTrackingChecked(response.status);
31+
setIsMultisite(response.is_multisite);
32+
setDocLink(response.usage_doc_link);
33+
setIsWhiteLabel(response.is_white_label);
34+
})
35+
.catch((error) => {
36+
console.error("Error fetching tracking status:", error);
37+
});
38+
}, []);
39+
40+
const handlePreloadingChange = () => {
41+
const newValue = !isPreloadingChecked;
42+
setPreloadingChecked(newValue);
43+
setPreloadFeedback(null);
44+
1445
const formData = new window.FormData();
15-
formData.append( 'action', 'bcf_preloading' );
16-
formData.append( 'security', bsf_custom_fonts_admin.preload_font_nonce );
17-
formData.append( 'isPreloading', ! isChecked );
46+
formData.append("action", "bcf_preloading");
47+
formData.append("security", bsf_custom_fonts_admin.preload_font_nonce);
48+
formData.append("isPreloading", newValue);
1849

1950
apiFetch({
2051
url: bsf_custom_fonts_admin.ajax_url,
21-
method: 'POST',
52+
method: "POST",
2253
body: formData,
2354
})
24-
.then((response) => {
25-
if (response.success) {
26-
dispatch({
27-
type: 'UPDATE_PRELOADING',
28-
payload: !isChecked,
55+
.then((response) => {
56+
if (response.success) {
57+
dispatch({
58+
type: "UPDATE_PRELOADING",
59+
payload: newValue,
60+
});
61+
setPreloadFeedback({
62+
type: "success",
63+
message: newValue
64+
? __(
65+
"Font preloading enabled successfully.",
66+
"custom-fonts"
67+
)
68+
: __(
69+
"Font preloading disabled successfully.",
70+
"custom-fonts"
71+
),
72+
});
73+
}
74+
})
75+
.catch((error) => {
76+
console.error("Error updating preloading:", error);
77+
setPreloadingChecked(!newValue);
78+
setPreloadFeedback({
79+
type: "error",
80+
message: __(
81+
"Failed to update preloading setting.",
82+
"custom-fonts"
83+
),
2984
});
30-
}
85+
});
86+
};
87+
88+
// Handle Usage Tracking toggle of bsf-analytics.
89+
const handleTrackingChange = (checked) => {
90+
setTrackingFeedback(null);
91+
92+
apiFetch({
93+
path: "/custom-fonts/v1/update-tracking-status",
94+
method: "POST",
95+
data: { status: checked },
3196
})
32-
.catch((error) => {
33-
console.error('Error during API request:', error);
34-
dispatch({
35-
type: 'API_REQUEST_FAILED',
36-
payload: error.message || 'An error occurred. Please try again.',
97+
.then((response) => {
98+
if (response.success) {
99+
setTrackingChecked(checked);
100+
setTrackingFeedback({
101+
type: "success",
102+
message: checked
103+
? __(
104+
"Usage tracking enabled successfully.",
105+
"custom-fonts"
106+
)
107+
: __(
108+
"Usage tracking disabled successfully.",
109+
"custom-fonts"
110+
),
111+
});
112+
} else {
113+
setTrackingFeedback({
114+
type: "error",
115+
message: response.message,
116+
});
117+
setTrackingChecked(!checked);
118+
}
119+
})
120+
.catch((error) => {
121+
setTrackingFeedback({
122+
type: "error",
123+
message:
124+
error.message || __("Update failed", "custom-fonts"),
125+
});
126+
setTrackingChecked(!checked);
37127
});
38-
});
39128
};
40129

41130
const classNames = (...classes) => {
42-
return classes.filter(Boolean).join(' ')
43-
}
131+
return classes.filter(Boolean).join(" ");
132+
};
133+
44134
return (
45-
<div>
46-
<p className="font-semibold text-base leading-6 mr-[-20px]">
47-
{ __( 'Global Settings', 'custom-fonts' ) }
135+
<div className="space-y-8">
136+
<p className="font-semibold text-base leading-6">
137+
{__("Global Settings", "custom-fonts")}
48138
</p>
49-
<div className="flex flex-col items-start gap-6 rounded-sm mt-[20px]">
50-
<label className="flex items-center gap-1.5 cursor-pointer relative">
51-
<Switch.Group as="div" className="flex items-center">
52-
<Switch
53-
checked={isChecked}
54-
onChange={preloadingUpdate}
55-
className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none"
56-
>
57-
<span className="sr-only">Use setting</span>
58-
<span aria-hidden="true" className="pointer-events-none absolute h-full w-full rounded-md bg-white" />
59-
<span
60-
aria-hidden="true"
61-
className={classNames(
62-
isChecked ? 'bg-[#3858e9]' : 'bg-gray-200',
63-
'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
64-
)}
65-
/>
66-
<span
67-
aria-hidden="true"
139+
140+
<div className="space-y-6">
141+
{/* Preload Fonts Toggle */}
142+
<div className="flex flex-col gap-2">
143+
<Switch.Group>
144+
<div className="flex items-center">
145+
<Switch
146+
checked={isPreloadingChecked}
147+
onChange={handlePreloadingChange}
68148
className={classNames(
69-
isChecked ? 'translate-x-5' : 'translate-x-0',
70-
'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
149+
isPreloadingChecked
150+
? "bg-[#3858e9]"
151+
: "bg-gray-200",
152+
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none"
71153
)}
72-
/>
73-
</Switch>
74-
<Switch.Label as="span" className="ml-3 text-sm switch-toggle-label">
75-
<span className="text-gray-900 text-base font-normal ml-2">{ __( 'Preload Fonts', 'custom-fonts' ) }</span>
76-
</Switch.Label>
154+
>
155+
<span className="sr-only">
156+
{__("Preload Fonts", "custom-fonts")}
157+
</span>
158+
<span
159+
className={classNames(
160+
isPreloadingChecked
161+
? "translate-x-6"
162+
: "translate-x-1",
163+
"inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
164+
)}
165+
/>
166+
</Switch>
167+
<Switch.Label className="ml-3 text-base font-normal text-gray-900">
168+
{__("Preload Fonts", "custom-fonts")}
169+
</Switch.Label>
170+
</div>
77171
</Switch.Group>
78-
</label>
79-
<p className="text-[#7e7e7e] mt-[-12px] text-sm font-normal leading-[16px]"> { __( 'Preloading your font file will speeds up your website.', 'custom-fonts' ) } </p>
172+
173+
<p className="text-sm text-gray-600">
174+
{__(
175+
"Preloading your font file will speed up your website.",
176+
"custom-fonts"
177+
)}
178+
</p>
179+
180+
{preloadFeedback && (
181+
<p
182+
className={`text-sm ${
183+
preloadFeedback.type === "success"
184+
? "text-green-600"
185+
: "text-red-600"
186+
}`}
187+
>
188+
{preloadFeedback.message}
189+
</p>
190+
)}
191+
</div>
192+
193+
{/* Usage Tracking Toggle */}
194+
{!isWhiteLabel && (
195+
<div className="flex flex-col gap-2">
196+
<Switch.Group>
197+
<div className="flex items-center">
198+
<Switch
199+
checked={isTrackingChecked}
200+
onChange={handleTrackingChange}
201+
className={classNames(
202+
isTrackingChecked
203+
? "bg-[#3858e9]"
204+
: "bg-gray-200",
205+
"relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none cursor-pointer"
206+
)}
207+
>
208+
<span className="sr-only">
209+
{__("Usage Tracking", "custom-fonts")}
210+
</span>
211+
<span
212+
className={classNames(
213+
isTrackingChecked
214+
? "translate-x-6"
215+
: "translate-x-1",
216+
"inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
217+
)}
218+
/>
219+
</Switch>
220+
<Switch.Label className="ml-3 text-base font-normal text-gray-900">
221+
{sprintf(
222+
__(
223+
"Allow %s to track usage data",
224+
"custom-fonts"
225+
),
226+
author
227+
)}
228+
</Switch.Label>
229+
</div>
230+
</Switch.Group>
231+
232+
<p className="text-sm text-gray-600">
233+
{sprintf(
234+
__(
235+
"Allow %s products to track non-sensitive usage data.",
236+
"custom-fonts"
237+
),
238+
author
239+
)}
240+
<a
241+
href={docLink}
242+
target="_blank"
243+
rel="noopener noreferrer"
244+
className="text-[#3858e9] hover:underline"
245+
>
246+
{__("Learn more", "custom-fonts")}
247+
</a>
248+
</p>
249+
250+
{isMultisite && (
251+
<p className="text-sm text-gray-600">
252+
{__(
253+
"This will be applicable for all sites from the network.",
254+
"custom-fonts"
255+
)}
256+
</p>
257+
)}
258+
259+
{trackingFeedback && (
260+
<p
261+
className={`text-sm ${
262+
trackingFeedback.type === "success"
263+
? "text-green-600"
264+
: "text-red-600"
265+
}`}
266+
>
267+
{trackingFeedback.message}
268+
</p>
269+
)}
270+
</div>
271+
)}
80272
</div>
81273
</div>
82274
);

custom-fonts.php

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Author: Brainstorm Force
77
* Author URI: http://www.brainstormforce.com
88
* Text Domain: custom-fonts
9-
* Version: 2.1.11
9+
* Version: 2.1.12
1010
*
1111
* @package Bsf_Custom_Fonts
1212
*/
@@ -25,7 +25,7 @@
2525
define( 'BSF_CUSTOM_FONTS_BASE', plugin_basename( BSF_CUSTOM_FONTS_FILE ) );
2626
define( 'BSF_CUSTOM_FONTS_DIR', plugin_dir_path( BSF_CUSTOM_FONTS_FILE ) );
2727
define( 'BSF_CUSTOM_FONTS_URI', plugins_url( '/', BSF_CUSTOM_FONTS_FILE ) );
28-
define( 'BSF_CUSTOM_FONTS_VER', '2.1.11' );
28+
define( 'BSF_CUSTOM_FONTS_VER', '2.1.12' );
2929
define( 'BSF_CUSTOM_FONTS_POST_TYPE', 'bsf_custom_fonts' );
3030
define( 'BSF_CUSTOM_FONTS_ADMIN_PAGE', 'bsf-custom-fonts' );
3131

@@ -75,6 +75,7 @@
7575
// BSF Analytics library.
7676
if ( ! class_exists( 'BSF_Analytics_Loader' ) ) {
7777
require_once BSF_CUSTOM_FONTS_DIR . 'admin/bsf-analytics/class-bsf-analytics-loader.php';
78+
require_once BSF_CUSTOM_FONTS_DIR . 'includes/rest-api/class-cf-bsf-analytics-compatibility.php';
7879
}
7980

8081
$bsf_analytics = BSF_Analytics_Loader::get_instance();

0 commit comments

Comments
 (0)