Merge pull request #372 from addonify/development

New notice color options, new product stock status label options, and JS update

README.txt

@@ -3,8 +3,8 @@
 Contributors: addonify
 Tags: wishlist, woocommerce wishlist, product wishlist, woocommerce, ecommerce, e-commerce
 Requires at least: 5.9
-Tested up to: 6.2.1
-Stable tag: 2.0.2
+Tested up to: 6.2.2
+Stable tag: 2.0.3
 Requires PHP: 7.4
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -141,6 +141,15 @@ You can use this `[addonify_wishlist]` shortcode to display the wishlist table i
 
 == Changelog ==
 
+= 2.0.3 - 26 May, 2023 =
+
+- Added: Color options for wishlist notice.
+- Added: Added to cart notice and related option to match the option `Remove product from wishlist after added to cart`.
+- Added: Label options for product stock status.
+- Tweak: How reactive state on plugin setting's page is managed (vue js).
+- Fix: Add to wishlist button dynamic CSS. #361
+- Fix: Notice displays for the guest users.
+
 = 2.0.2 - 18 May, 2023 =
 
 - Removed: Added to cart popup modal displayed when product is added to cart in wishlist page.

addonify-wishlist.php

@@ -10,7 +10,7 @@
  * Plugin Name:       Addonify - WooCommerce Wishlist
  * Plugin URI:        https://wordpress.org/plugins/addonify-wishlist
  * Description:       Addonify WooCommerce Wishlist is a light-weight yet powerful tool that adds a wishlist functionality to your e-commerce shop.
- * Version:           2.0.2
+ * Version:           2.0.3
  * Requires at least: 5.9
  * Requires PHP:      7.4
  * Author:            Addonify
@@ -26,7 +26,7 @@
 	die;
 }
 
-define( 'ADDONIFY_WISHLIST_VERSION', '2.0.2' );
+define( 'ADDONIFY_WISHLIST_VERSION', '2.0.3' );
 define( 'ADDONIFY_WISHLIST_DB_INITIALS', 'addonify_wishlist_' );
 define( 'ADDONIFY_WISHLIST_PLUGIN_PATH', dirname( __FILE__ ) );
 define( 'ADDONIFY_WISHLIST_PLUGIN_FILE', __FILE__ );

admin/app/dist/manifest.json

@@ -7,7 +7,7 @@
     "css": [
       "assets/main-3233b0e6.css"
     ],
-    "file": "assets/main-98d2bd3a.js",
+    "file": "assets/main-1abcc74a.js",
     "isEntry": true,
     "src": "admin/app/src/main.js"
   }

admin/app/src/components/core/Icon.vue

@@ -236,4 +236,30 @@ const props = defineProps({
 			/>
 		</svg>
 	</span>
+	<span v-if="props.name === 'headphone'" class="icon" :class="props.class">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			:width="props.size"
+			:height="props.size"
+		>
+			<path
+				d="M21,12.424V11A9,9,0,0,0,3,11v1.424A5,5,0,0,0,5,22a2,2,0,0,0,2-2V14a2,2,0,0,0-2-2V11a7,7,0,0,1,14,0v1a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2,5,5,0,0,0,2-9.576ZM5,20H5a3,3,0,0,1,0-6Zm14,0V14a3,3,0,0,1,0,6Z"
+			/>
+		</svg>
+	</span>
+	<span v-if="props.name === 'question'" class="icon" :class="props.class">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			:width="props.size"
+			:height="props.size"
+		>
+			<path
+				d="m21,4h-3v-1c0-1.654-1.346-3-3-3H3C1.346,0,0,1.346,0,3v14.854c0,.794.435,1.52,1.134,1.894.318.171.667.255,1.015.255.416,0,.831-.121,1.19-.36l2.661-1.774v3.131h10.697l3.964,2.644c.359.239.774.36,1.19.36.348,0,.696-.085,1.015-.256.699-.375,1.134-1.101,1.134-1.894V7c0-1.654-1.346-3-3-3ZM2.23,17.979c-.019.012-.074.048-.152.007-.079-.042-.079-.109-.079-.131V3c0-.552.449-1,1-1h12c.552,0,1,.448,1,1v12H6.697l-4.467,2.979Zm19.77,3.876c0,.021,0,.089-.078.131-.08.043-.134.006-.152-.007l-4.467-2.979h-9.303v-2h10V6h3c.552,0,1,.448,1,1v14.854ZM8,7h-2c0-.889.391-1.727,1.072-2.299.681-.572,1.577-.814,2.463-.653,1.209.211,2.204,1.205,2.417,2.417.223,1.272-.382,2.543-1.506,3.164-.447.246-.447.318-.447.371h-2c0-1.308,1.038-1.879,1.481-2.123.29-.159.595-.535.502-1.066-.069-.392-.402-.725-.793-.793-.306-.056-.602.022-.832.216-.228.19-.358.47-.358.767Zm0,4h2v2h-2v-2Z"
+			/>
+		</svg>
+	</span>
 </template>

admin/app/src/components/partials/Hero.vue

@@ -8,7 +8,7 @@ const { __ } = wp.i18n;
 			<h3 class="hero-title">
 				{{
 					__(
-						"Loving addonify wishlist? Help us make a better software",
+						"Do you have a problem? Help is only a mouse click away!",
 						"addonify-wishlist"
 					)
 				}}
@@ -17,11 +17,11 @@ const { __ } = wp.i18n;
 		<div class="action">
 			<a
 				class="adfy-button review-link"
-				href="https://wordpress.org/support/plugin/addonify-wishlist/reviews/#new-post"
+				href="https://wordpress.org/support/plugin/addonify-wishlist/"
 				target="_blank"
 			>
-				{{ __("Drop a review", "addonify-wishlist") }}
-				<Icon name="comment" size="18px" />
+				{{ __("Get Help", "addonify-wishlist") }}
+				<Icon name="question" size="20px" />
 			</a>
 		</div>
 	</section>

admin/app/src/helpers/api.ts

@@ -0,0 +1,12 @@
+/**
+ *
+ * Common headers for all requests.
+ *
+ * @since: 2.0.3
+ */
+
+export const commonHeader = {
+	charset: "utf-8",
+	"cache-control": "no-cache",
+	"content-type": "application/json",
+};

admin/app/src/helpers/functions.ts

@@ -0,0 +1,22 @@
+/**
+ *
+ * Return date and time in the format of: 2021-01-01-13:05:49
+ *
+ * @return {string} date and time
+ * @since 2.0.3
+ */
+
+const generateDateTime = (): string => {
+	let date = new Date();
+
+	let year = date.getFullYear();
+	let month = date.getMonth() + 1; // 0-11
+	let day = date.getDate();
+	let hour = date.getHours();
+	let minute = date.getMinutes();
+	let second = date.getSeconds();
+
+	return `${year}-${month}-${day}-${hour}:${minute}:${second}`;
+};
+
+export const getCurrentDateTime = generateDateTime();

admin/app/src/stores/products.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { ElMessage } from "element-plus";
 import { useSettingsStore } from "@stores/settings";
 import { recommendedProductsList } from "@helpers/endpoint";
+import { commonHeader } from "@helpers/api";
 
 /**
  *
@@ -200,6 +201,7 @@ export const useProductStore = defineStore({
 
 					method: "GET",
 					path: `/wp/v2/plugins`,
+					headers: commonHeader,
 				});
 
 				//console.log(res);
@@ -291,7 +293,7 @@ export const useProductStore = defineStore({
 
 					method: "POST",
 					path: "/wp/v2/plugins",
-
+					headers: commonHeader,
 					data: {
 						slug: slug,
 						status: "active",
@@ -361,6 +363,7 @@ export const useProductStore = defineStore({
 
 					method: "POST",
 					path: `/wp/v2/plugins/${slug}`,
+					headers: commonHeader,
 					data: {
 						status: "active",
 						plugin: `${slug}/${slug}`,

admin/app/src/stores/settings.ts

@@ -2,6 +2,8 @@ import { defineStore } from "pinia";
 import { ElMessage } from "element-plus"; // @ts-ignore
 import { apiEndpoint } from "@helpers/endpoint"; // @ts-ignore
 import { jsonFileName } from "@helpers/global"; // @ts-ignore
+import { commonHeader } from "@helpers/api"; // @ts-ignore
+import { getCurrentDateTime } from "@helpers/functions"; // @ts-ignore
 
 /**
  *
@@ -22,7 +24,7 @@ const { __ } = wp.i18n;
  * @since 2.0.0
  */
 
-let oldSettings: any = {};
+let oldSettings: any = [];
 
 /**
  *
@@ -70,6 +72,19 @@ export const useSettingsStore = defineStore({
 		 */
 		haveChanges: (state: any): boolean =>
 			!isEqual(state.settings, oldSettings) ? true : false,
+
+		/**
+		 *
+		 * Check if we do have state of settings in the memory.
+		 * If we do have, then return true.
+		 *
+		 * @param {Object} state
+		 * @returns {boolean} true/false
+		 * @since 2.0.3
+		 */
+
+		haveSettingsStateInMemory: (state: any): boolean =>
+			Object.keys(state.settings).length === 0 ? false : true,
 	},
 
 	actions: {
@@ -95,6 +110,7 @@ export const useSettingsStore = defineStore({
 			apiFetch({
 				path: apiEndpoint + "/get_options",
 				method: "GET",
+				headers: commonHeader,
 			})
 				.then((res: any) => {
 					/**
@@ -151,6 +167,7 @@ export const useSettingsStore = defineStore({
 			apiFetch({
 				path: `${apiEndpoint}/${endpoint}`,
 				method: "POST",
+				headers: commonHeader,
 			})
 				.then((res: any) => {
 					/**
@@ -234,6 +251,7 @@ export const useSettingsStore = defineStore({
 			apiFetch({
 				path: apiEndpoint + "/update_options",
 				method: "POST",
+				headers: commonHeader,
 				data: {
 					settings_values: payload,
 				},
@@ -255,12 +273,21 @@ export const useSettingsStore = defineStore({
 							offset: 50,
 							duration: 3000,
 						});
+
+						let tempOptionsState = cloneDeep(this.settings);
+						this.settings = {};
+						this.settings = cloneDeep(tempOptionsState);
+						oldSettings = cloneDeep(this.settings);
 					} else {
 						ElMessage.error({
 							message: res.message,
 							offset: 50,
 							duration: 10000,
 						});
+
+						setTimeout(() => {
+							window.location.reload();
+						}, 2000);
 					}
 				})
 				.catch((err: any) => {
@@ -276,9 +303,13 @@ export const useSettingsStore = defineStore({
 						offset: 50,
 						duration: 10000,
 					});
+
+					let tempOptionsState = cloneDeep(oldSettings);
+					this.settings = {};
+					this.settings = cloneDeep(tempOptionsState);
 				})
 				.finally(() => {
-					this.fetchSettings();
+					//this.fetchSettings();
 					this.status.isSaving = false;
 				});
 		},
@@ -306,6 +337,7 @@ export const useSettingsStore = defineStore({
 			apiFetch({
 				path: apiEndpoint + "/export_options",
 				method: "GET",
+				headers: commonHeader,
 			})
 				.then((res: any) => {
 					/**
@@ -317,12 +349,11 @@ export const useSettingsStore = defineStore({
 					this.status.message = res.message; // Get the message.
 
 					if (res.success === true) {
-						let date = new Date().getTime();
 						let link = document.createElement("a");
 						link.href = res.url;
 						link.setAttribute(
 							"download",
-							`${jsonFileName}-all-settings-${date}.json`
+							`${jsonFileName}-all-settings-${getCurrentDateTime}.json`
 						);
 						document.body.appendChild(link);
 						link.click();
@@ -380,6 +411,7 @@ export const useSettingsStore = defineStore({
 			apiFetch({
 				path: apiEndpoint + "/import_options",
 				method: "POST",
+				headers: commonHeader,
 				body: payload,
 			})
 				.then((res: any) => {
@@ -396,6 +428,10 @@ export const useSettingsStore = defineStore({
 							offset: 50,
 							duration: 3000,
 						});
+
+						setTimeout(() => {
+							window.location.reload();
+						}, 2000);
 					} else {
 						ElMessage.error({
 							message: this.status.message,
@@ -420,7 +456,7 @@ export const useSettingsStore = defineStore({
 					});
 				})
 				.finally(() => {
-					this.fetchSettings();
+					//this.fetchSettings();
 					this.status.isImporting = false;
 				});
 		},

admin/app/src/todo.md

@@ -0,0 +1,6 @@
+### Todo: 
+
+- [ ] Improve typescript. I have used "any" state in most of the palces. 
+- [ ] Define types or create interfaces and use them accordingly.
+- [ ] Optimize code for fetch api's calls. 
+- [ ] Add test cases with jest, vitest or cypress.

admin/app/src/views/Products.vue

@@ -53,7 +53,19 @@ onBeforeMount(() => {
 
 onMounted(() => {
 	scrollToTop();
-	store.fetchSettings(); // For the route links.
+
+	/**
+	 *
+	 * Check state of options in memory.
+	 * If we have state in memory, we can use it.
+	 * If not, we need to fetch it from the server.
+	 *
+	 * @since: 2.0.3
+	 */
+
+	if (!store.haveSettingsStateInMemory) {
+		store.fetchSettings();
+	}
 
 	/**
 	 *

admin/app/src/views/Setting.vue

@@ -5,18 +5,29 @@ import JumboBoxContainer from "@layouts/JumboBoxContainer.vue";
 import Sidebar from "@layouts/Sidebar.vue";
 import RouteLinks from "@layouts/RouteLinks.vue";
 import Loading from "@components/core/Loading.vue";
-//import Hero from "@components/partials/Hero.vue";
+import Hero from "@components/partials/Hero.vue";
 import { useSettingsStore } from "@stores/settings";
 import { advertiseUpsell } from "@helpers/global";
 
 const store = useSettingsStore();
 
 onMounted(() => {
-	store.fetchSettings();
+	/**
+	 *
+	 * Check state of options in memory.
+	 * If we have state in memory, we can use it.
+	 * If not, we need to fetch it from the server.
+	 *
+	 * @since: 2.0.3
+	 */
+
+	if (!store.haveSettingsStateInMemory) {
+		store.fetchSettings();
+	}
 });
 </script>
 <template>
-	<!--<Hero />-->
+	<Hero />
 	<section
 		id="app-divider"
 		class="app-divider"