From 92e8773440215e417aa156d7481691a2dafa43e1 Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Fri, 9 Feb 2024 03:04:35 +0600 Subject: [PATCH 1/7] fix: free-shipping-bar-documentation-redirection-issue --- .../assets/src/components/SettingInstruction.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingInstruction.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingInstruction.js index f6332d2d..566dd0b7 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingInstruction.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingInstruction.js @@ -51,12 +51,12 @@ const SettingInstruction = () => { }} onClick={() => window.open( - "https://storegrowth.io/docs/free-shipping-bar/", + "https://storegrowth.io/docs/free-shipping-bar-setting/", "_blank" ) } > - Documentaion + Documentation From eb30a233f69d3a82f9aefd5c31e48c32b7ab496e Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Sun, 11 Feb 2024 23:53:15 +0600 Subject: [PATCH 2/7] enhance: implement-settings-undo-option-for-free-shipping-bar-&-sales-countdown --- .../src/components/SalesCountdownLayout.js | 19 ++- .../assets/src/components/Design.js | 126 ++++++++++++++++++ .../DirectCheckout/assets/src/helper.js | 27 ++-- .../assets/src/components/DiscountBanner.js | 3 +- .../src/components/FreeShippingBarLayout.js | 21 ++- .../assets/src/components/SettingsTab.js | 4 +- assets/src/admin.scss | 13 +- .../pro-previews/Modules/SalesPop/index.js | 2 +- .../Panels/PanelSettings/TabPanels.js | 11 +- .../settings/Panels/PanelSettings/index.js | 8 +- 10 files changed, 214 insertions(+), 20 deletions(-) diff --git a/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js b/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js index 9023c517..7b9fe2b0 100644 --- a/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js +++ b/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js @@ -56,8 +56,14 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { ...initialSalesCountdownData, }); + const [showUndo, setShowUndo] = useState( false ); + const [undoData, setUndoData] = useState({ + ...initialSalesCountdownData, + }); + const onFormReset = () => { setFormData({ ...initialSalesCountdownData }); + setShowUndo( false ); }; const changeTab = (key) => { @@ -96,8 +102,10 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { data: data, }) .success(() => { + setShowUndo(false); setButtonLoading(false); notificationMessage(type); + setUndoData({ ...formData }); }); }; @@ -116,6 +124,7 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { .success((response) => { if (response.success) { setFormData({ ...formData, ...response.data }); + setUndoData({ ...undoData, ...response.data }); setTimeout(() => setPageLoading(false), 500); } }); @@ -131,6 +140,12 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { const onFieldChange = (key, value) => { setFormData({ ...formData, [key]: value }); + setShowUndo( true ); + }; + + const onUndoClick = () => { + setShowUndo( false ); + setFormData({ ...undoData }); }; const noop = () => {}; @@ -189,10 +204,12 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { {showPreview && tabName && ( diff --git a/Includes/Modules/DirectCheckout/assets/src/components/Design.js b/Includes/Modules/DirectCheckout/assets/src/components/Design.js index 012603be..33045424 100644 --- a/Includes/Modules/DirectCheckout/assets/src/components/Design.js +++ b/Includes/Modules/DirectCheckout/assets/src/components/Design.js @@ -6,6 +6,8 @@ import Number from "../../../../../../assets/src/components/settings/Panels/Pane import ColourPicker from "../../../../../../assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker"; import ActionsHandler from "sales-booster/src/components/settings/Panels/PanelSettings/ActionsHandler"; import { createDirectCheckoutForm } from "../helper"; +import Switcher from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/Switcher"; +import {SelectBox} from "sales-booster/src/components/settings/Panels"; function Design({ onFormSave, upgradeTeaser }) { const { setCreateFromData } = useDispatch("sgsb_direct_checkout"); @@ -30,9 +32,133 @@ function Design({ onFormSave, upgradeTeaser }) { }); }; + const fontFamily = [ + { + value: 'poppins', + label: __('Poppins', 'storegrowth-sales-booster'), + }, + { + value: 'roboto', + label: __('Roboto', 'storegrowth-sales-booster'), + }, + { + value: 'lato', + label: __('Lato', 'storegrowth-sales-booster'), + }, + { + value: 'montserrat', + label: __('Montserrat', 'storegrowth-sales-booster'), + }, + { + value: 'ibm_plex_sans', + label: __('IBM Plex Sans', 'storegrowth-sales-booster'), + }, + ]; + + const borders = [ + { value: 'dotted', label: __( 'Dotted', 'storegrowth-sales-booster' ) }, + { value: 'dashed', label: __( 'Dashed', 'storegrowth-sales-booster' ) }, + { value: 'solid', label: __( 'Solid', 'storegrowth-sales-booster' ) }, + { value: 'no_border', label: __( 'No Border', 'storegrowth-sales-booster' ) }, + ]; + return ( + + + + + + + + + + + + + + { setFormData({ ...initialShipData }); + setShowUndo( false ); }; const fontFamily = [ @@ -97,6 +103,7 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod .success((response) => { if (response.success && response.data) { setFormData({ ...formData, ...response.data }); + setUndoData({ ...undoData, ...response.data }); setTimeout(() => setPageLoading(false), 500); } }); @@ -111,7 +118,14 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod ...formData, [key]: value, }); + setShowUndo( true ); + }; + + const onUndoClick = () => { + setShowUndo( false ); + setFormData({ ...undoData }); }; + const changeTab = (key) => { navigate("/progressive-discount-banner?tab_name=" + key); }; @@ -148,8 +162,10 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod data, }) .success(() => { + setShowUndo(false); setButtonLoading(false); notificationMessage(type); + setUndoData({ ...formData }); }); }; @@ -161,6 +177,7 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod onFormSave("banner_settings")} buttonLoading={buttonLoading} @@ -195,10 +212,12 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod {showPreview && tabName && ( diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js index 3f71d143..82b739c5 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js @@ -11,7 +11,8 @@ function SettingsTab(props) { onFieldChange, onFormSave, buttonLoading, - onFormReset + onFormReset, + setShowUndo } = props; @@ -19,6 +20,7 @@ function SettingsTab(props) { diff --git a/assets/src/admin.scss b/assets/src/admin.scss index 3cb0f83f..cf6ee9a9 100644 --- a/assets/src/admin.scss +++ b/assets/src/admin.scss @@ -2033,6 +2033,17 @@ End Settings Sidebar .settings-panel { margin-right: 32px; + .ant-tabs-extra-content { + .dashicons { + color: #0875ff; + cursor: pointer; + &.dashicons-undo { + color: #0875ff; + cursor: pointer; + } + } + } + .sgsb-settings-card { height: 100%; border-radius: 5px; @@ -3120,4 +3131,4 @@ End Settings Sidebar font-size: 14px; } } -} \ No newline at end of file +} diff --git a/assets/src/components/pro-previews/Modules/SalesPop/index.js b/assets/src/components/pro-previews/Modules/SalesPop/index.js index 6a501df2..331c8d93 100644 --- a/assets/src/components/pro-previews/Modules/SalesPop/index.js +++ b/assets/src/components/pro-previews/Modules/SalesPop/index.js @@ -7,7 +7,7 @@ import InputNumber from '../../../settings/Panels/PanelSettings/Fields/Number'; import TextAreaBox from '../../../settings/Panels/PanelSettings/Fields/TextAreaBox'; import SettingsSection from '../../../settings/Panels/PanelSettings/SettingsSection'; import ColourPicker from "../../../settings/Panels/PanelSettings/Fields/ColorPicker"; -import VisibilityControl from 'sales-booster-sales-notification/src/components/VisibilityControl'; +import VisibilityControl from '../../../../../../Includes/Modules/SalesPop/assets/src/components/VisibilityControl'; // Handle sales pop modules pro settings prompts. addFilter( diff --git a/assets/src/components/settings/Panels/PanelSettings/TabPanels.js b/assets/src/components/settings/Panels/PanelSettings/TabPanels.js index 38c22562..8674dc25 100644 --- a/assets/src/components/settings/Panels/PanelSettings/TabPanels.js +++ b/assets/src/components/settings/Panels/PanelSettings/TabPanels.js @@ -2,10 +2,17 @@ import { Tabs } from "antd"; const { TabPane } = Tabs; -const TabPanels = ( { tabPanels, activeTab, changeHandler, classes } ) => { +const TabPanels = ( { tabPanels, activeTab, changeHandler, classes, undoHandler, showUndoIcon = false } ) => { return ( // Handle settings tab & panels preview by using props. - + ) + } } + > { tabPanels && tabPanels?.map( tab => ( { tab?.panel } diff --git a/assets/src/components/settings/Panels/PanelSettings/index.js b/assets/src/components/settings/Panels/PanelSettings/index.js index 9ad8f17f..1db69094 100644 --- a/assets/src/components/settings/Panels/PanelSettings/index.js +++ b/assets/src/components/settings/Panels/PanelSettings/index.js @@ -4,8 +4,10 @@ import TabPanels from "./TabPanels"; const PanelSettings = ( { tabPanels, activeTab, + undoHandler, changeHandler, - colSpan = 12 + colSpan = 12, + showUndoIcon = false } ) => { return ( // Handle settings column width dynamically by using colSpan. @@ -14,8 +16,10 @@ const PanelSettings = ( { ); From f58a575fef649d69603ec6f168f3a47d2a158ae9 Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Mon, 12 Feb 2024 01:45:15 +0600 Subject: [PATCH 3/7] enhance: implement-bump-type-selection-&-dependencies-for-offer-selection --- .../UpsellOrderBump/Includes/OrderBump.php | 35 +++------ .../assets/src/components/BasicInfo.js | 74 ++++++++++++------- .../assets/src/components/CreateBump.js | 13 +++- .../assets/src/components/OrderBumpList.js | 18 ++--- .../UpsellOrderBump/assets/src/helper.js | 1 + 5 files changed, 78 insertions(+), 63 deletions(-) diff --git a/Includes/Modules/UpsellOrderBump/Includes/OrderBump.php b/Includes/Modules/UpsellOrderBump/Includes/OrderBump.php index 844c570e..549fc74d 100644 --- a/Includes/Modules/UpsellOrderBump/Includes/OrderBump.php +++ b/Includes/Modules/UpsellOrderBump/Includes/OrderBump.php @@ -43,7 +43,6 @@ public function bump_product_frontend_view() { 'posts_per_page' => -1, ); $bump_list = get_posts( $args_bump ); - $showed_bump_product_id = array(); foreach ( $all_cart_products as $value ) { $cat_ids = $value['data']->get_category_ids(); @@ -91,29 +90,19 @@ public function bump_product_frontend_view() { // don't show the offer if the 'offer product' is already added in the cart from the shop page with regular price. continue; } - if ( - $bump_info->target_products - && - count( $all_cart_product_ids ) !== count( array_diff( $all_cart_product_ids, $bump_info->target_products ) ) - && - ! in_array( $offer_product_id, $showed_bump_product_id, true ) - ) { - include __DIR__ . '/../templates/bump-product-front-view.php'; - - $showed_bump_product_id[] = $offer_product_id; - } - - if ( - isset( $bump_info->target_categories ) - && count( $all_cart_category_ids ) !== count( array_diff( $all_cart_category_ids, $bump_info->target_categories ) ) - && ! in_array( $offer_product_id, $showed_bump_product_id, true ) - ) { - - include __DIR__ . '/../templates/bump-product-front-view.php'; - - $showed_bump_product_id[] = $offer_product_id; - } + $bump_type = ! empty( $bump_info->bump_type ) ? esc_html( $bump_info->bump_type ) : 'products'; + if ( $bump_type === 'products' ) { + $target_products = ! empty( $bump_info->target_products ) ? wc_clean( $bump_info->target_products ) : array(); + if ( $target_products && ( count( $all_cart_product_ids ) !== count( array_diff( $all_cart_product_ids, $target_products ) ) ) ) { + include __DIR__ . '/../templates/bump-product-front-view.php'; + } + } else { + $target_categories = ! empty( $bump_info->target_categories ) ? wc_clean( $bump_info->target_categories ) : array(); + if ( $target_categories && ( count( $all_cart_category_ids ) !== count( array_diff( $all_cart_category_ids, $target_categories ) ) ) ) { + include __DIR__ . '/../templates/bump-product-front-view.php'; + } + } } } diff --git a/Includes/Modules/UpsellOrderBump/assets/src/components/BasicInfo.js b/Includes/Modules/UpsellOrderBump/assets/src/components/BasicInfo.js index 252436ce..46fc6fde 100644 --- a/Includes/Modules/UpsellOrderBump/assets/src/components/BasicInfo.js +++ b/Includes/Modules/UpsellOrderBump/assets/src/components/BasicInfo.js @@ -11,6 +11,7 @@ import MultiSelectBox from "sales-booster/src/components/settings/Panels/PanelSe import SectionHeader from "sales-booster/src/components/settings/Panels/SectionHeader"; import SelectBox from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/SelectBox"; import OfferField from "./OfferField"; +import TextRadioBox from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/TextRadioBox"; const BasicInfo = ({ clearErrors }) => { @@ -108,6 +109,11 @@ const BasicInfo = ({ clearErrors }) => { } }; + const orderBumpDeal = [ + { key: 'products', value: __('Products', 'storegrowth-sales-booster') }, + { key: 'categories', value: __('Categories', 'storegrowth-sales-booster') }, + ]; + return ( @@ -122,36 +128,48 @@ const BasicInfo = ({ clearErrors }) => { "storegrowth-sales-booster" )} /> - - + {createBumpData?.bump_type !== "categories" ? ( + + ) : ( + + )} - {productList && ( +function TargetProductAndCategory({ type, catList, productList }) { + return ( + + {type === 'products' && productList && (
{__("Target Products", "storegrowth-sales-booster")}
@@ -136,7 +136,7 @@ function TargetProductAndCategory({ catList, productList }) {
)} - {catList && ( + {type === 'categories' && catList && (
{__("Target Categories", "storegrowth-sales-booster")}
@@ -146,7 +146,7 @@ function TargetProductAndCategory({ catList, productList }) {
)} - + ); } @@ -186,7 +186,7 @@ function OrderBumpList({ navigate }) { align: "left", }, { - title: "Target Product(s) and Categories", + title: "Target Product(s) or Categories", dataIndex: "product_category", }, { @@ -230,10 +230,10 @@ function OrderBumpList({ navigate }) { key: item, name: item.name_of_order_bump, product_category: ( - + ), offers: , - action: , + action: , }; } diff --git a/Includes/Modules/UpsellOrderBump/assets/src/helper.js b/Includes/Modules/UpsellOrderBump/assets/src/helper.js index 652c42da..d2fccb17 100644 --- a/Includes/Modules/UpsellOrderBump/assets/src/helper.js +++ b/Includes/Modules/UpsellOrderBump/assets/src/helper.js @@ -65,6 +65,7 @@ export const createBumpForm = { smart_offer: false, offer_product: '', offer_type: [], + bump_type: 'products', offer_amount: '', box_border_style: 'solid', box_border_color: '#32DBBE', From e1bc5b19f827a6075771f9f8561e609de5e3a31d Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Tue, 13 Feb 2024 01:46:20 +0600 Subject: [PATCH 4/7] enhance: implement-buy-now-button-ui-customization-functionalities-for-direct-checkout-module --- .../DirectCheckout/Includes/EnqueueScript.php | 9 + .../assets/src/components/Design.js | 280 +++++++++--------- .../assets/src/components/Preview.js | 25 +- .../DirectCheckout/assets/src/helper.js | 2 +- 4 files changed, 166 insertions(+), 150 deletions(-) diff --git a/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php b/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php index 155affa9..07c66359 100644 --- a/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php +++ b/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php @@ -109,6 +109,12 @@ private function dc_button_inline_styles() { $text_color = sgsb_find_option_setting( $settings, 'text_color', '#ffffff' ); $font_size = sgsb_find_option_setting( $settings, 'font_size', '16' ); $button_border_radius = sgsb_find_option_setting( $settings, 'button_border_radius', '5' ); + $button_border_style = sgsb_find_option_setting( $settings, 'button_border_style', 'solid' ); + $border_width = sgsb_find_option_setting( $settings, 'border_width', '1' ); + $border_color = sgsb_find_option_setting( $settings, 'border_color', '#008dff' ); + $horizontal_padding = sgsb_find_option_setting( $settings, 'paddingXaxis', '20' ); + $vertical_padding = sgsb_find_option_setting( $settings, 'paddingYaxis', '10' ); + $font_family = sgsb_find_option_setting( $settings, 'font_family', 'poppins' ); $theme = wp_get_theme(); $is_avada_theme = ! empty( $theme->name ) ? $theme->name === 'Avada' : false; @@ -127,6 +133,9 @@ private function dc_button_inline_styles() { font-size: {$font_size}px !important; color: {$text_color} !important; margin: {$button_margin}; + border: {$border_width}px {$button_border_style} {$border_color}; + padding: {$vertical_padding}px {$horizontal_padding}px; + font-family: {$font_family}; } "; if ( $is_avada_theme ) { diff --git a/Includes/Modules/DirectCheckout/assets/src/components/Design.js b/Includes/Modules/DirectCheckout/assets/src/components/Design.js index 33045424..c05f98ad 100644 --- a/Includes/Modules/DirectCheckout/assets/src/components/Design.js +++ b/Includes/Modules/DirectCheckout/assets/src/components/Design.js @@ -59,7 +59,7 @@ function Design({ onFormSave, upgradeTeaser }) { { value: 'dotted', label: __( 'Dotted', 'storegrowth-sales-booster' ) }, { value: 'dashed', label: __( 'Dashed', 'storegrowth-sales-booster' ) }, { value: 'solid', label: __( 'Solid', 'storegrowth-sales-booster' ) }, - { value: 'no_border', label: __( 'No Border', 'storegrowth-sales-booster' ) }, + { value: 'none', label: __( 'No Border', 'storegrowth-sales-booster' ) }, ]; return ( @@ -73,143 +73,147 @@ function Design({ onFormSave, upgradeTeaser }) { tooltip={ __( 'Will be able to achieve the control of the button style in the product.', 'storegrowth-sales-booster' ) } /> - - - - - - - - - - - - - - - - - - - + { Boolean( createDirectCheckoutFormData.button_style ) && ( + + + + + + + + + + + + + + + + + + + + + + ) } { return (
- diff --git a/Includes/Modules/DirectCheckout/assets/src/helper.js b/Includes/Modules/DirectCheckout/assets/src/helper.js index 55c8b2cd..cc649144 100644 --- a/Includes/Modules/DirectCheckout/assets/src/helper.js +++ b/Includes/Modules/DirectCheckout/assets/src/helper.js @@ -8,7 +8,7 @@ export const createDirectCheckoutForm = { button_color : "#008dff", border_color : "#008dff", border_width : 1, - paddingXaxis : 30, + paddingXaxis : 20, paddingYaxis : 10, generated_link : "example", checkout_redirect : 'legacy-checkout', From fdc81809d6f2b75b2a340ff3714800e90fd51f0f Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Tue, 13 Feb 2024 04:42:08 +0600 Subject: [PATCH 5/7] enhance: implement-cart-cta-button-for-free-shipping-bar --- .../Includes/EnqueueScript.php | 5 +++ .../assets/src/components/DesignTab.js | 18 ++++++++ .../assets/src/components/DiscountBanner.js | 45 +++++++++++++++++++ .../src/components/FreeShippingBarLayout.js | 5 +++ .../assets/src/components/Preview.js | 19 +++++++- .../assets/src/components/Templates.js | 5 +++ .../components/Templates/ShippingBarOne.js | 17 ++++++- .../templates/bar.php | 35 ++++++++++----- 8 files changed, 136 insertions(+), 13 deletions(-) diff --git a/Includes/Modules/ProgressiveDiscountBanner/Includes/EnqueueScript.php b/Includes/Modules/ProgressiveDiscountBanner/Includes/EnqueueScript.php index 7a0e9d3e..9117deac 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/Includes/EnqueueScript.php +++ b/Includes/Modules/ProgressiveDiscountBanner/Includes/EnqueueScript.php @@ -81,6 +81,11 @@ public function admin_enqueue_scripts( $hook ) { $settings_file['version'], false ); + + // Pass the Cart URL to the JavaScript file + wp_localize_script('sgsb-pd-banner-settings', 'sgsbFsbData', array( + 'cartUrl' => wc_get_cart_url(), // WooCommerce Cart URL + )); } } diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js index 1dd88277..09f16656 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js @@ -77,6 +77,24 @@ function DesignTab(props) { fieldValue={formData.close_icon_color} title={__('Close Button Color', 'storegrowth-sales-booster')} /> + { Boolean( formData.btn_style ) && ( + + + + + ) } diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js index 875ed932..40e257b2 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js @@ -7,6 +7,8 @@ import TextAreaBox from "../../../../../../assets/src/components/settings/Panels import SettingsSection from "../../../../../../assets/src/components/settings/Panels/PanelSettings/SettingsSection"; import BarIcon from "./BarIcon"; import SettingInstruction from "./SettingInstruction"; +import Switcher from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/Switcher"; +import TextInput from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/TextInput"; function DiscountBanner(props) { const { formData, setFormData, setShowUndo, onFieldChange } = props; @@ -181,6 +183,49 @@ function DiscountBanner(props) { "storegrowth-sales-booster" )} /> + + + + { Boolean( formData.btn_style ) && ( + + + + + ) } { applyFilters( diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js index 57d160b2..a1154ec0 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js @@ -24,17 +24,22 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod let [searchParams, setSearchParams] = useSearchParams("general"); const tabName = searchParams.get("tab_name") || "general"; const initialShipData = { + btn_text : 'Cart', bar_type : "normal", user_type : "both", font_size : 20, + btn_style : true, + btn_color : "#ffffff", text_color : "#ffffff", icon_color : "#ffffff", + btn_target : sgsbFsbData?.cartUrl, font_family : "poppins", banner_delay : 7, bar_position : "top", bar_template : 'shipping_bar_one', discount_type : "free-shipping", banner_height : 60, + btn_text_color : "#073b4c", banner_trigger : "after-few-seconds", close_icon_color : "#ffffff", background_color : "#0875FF", diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Preview.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Preview.js index b69fd311..9e57907f 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Preview.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Preview.js @@ -1,6 +1,7 @@ import React from 'react'; import BarIcon from "./BarIcon"; import {__} from "@wordpress/i18n"; +import {extractedTitle} from "sales-booster/src/utils/helper"; const Preview = ( { isProActive, formData, fontFamily } ) => { const bannerStyle = { @@ -59,8 +60,24 @@ const Preview = ( { isProActive, formData, fontFamily } ) => { fontSize: formData.font_size, }} > - {dynamicText} + { Boolean( formData.btn_style ) ? extractedTitle( dynamicText, 19 ) : dynamicText } + { Boolean( formData.btn_style ) && ( + + { extractedTitle( formData?.btn_text, 15 ) } + + ) }
{ let templateStyles = { shipping_bar_one: { + btn_text : __( 'Cart', 'storegrowth-sales-booster' ), font_size : 20, + btn_style : true, + btn_color : "#ffffff", text_color : "#ffffff", icon_color : "#ffffff", + btn_target : sgsbFsbData?.cartUrl, font_family : "poppins", bar_template : 'shipping_bar_one', banner_height : 60, + btn_text_color : "#073b4c", close_icon_color : "#ffffff", background_color : "#0875FF", cart_minimum_amount : 10, diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates/ShippingBarOne.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates/ShippingBarOne.js index 6c241896..47b8d797 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates/ShippingBarOne.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates/ShippingBarOne.js @@ -1,5 +1,6 @@ import React from "react"; import { __ } from "@wordpress/i18n"; +import { extractedTitle } from "sales-booster/src/utils/helper"; const ShippingBarOne = () => { return ( @@ -73,9 +74,23 @@ const ShippingBarOne = () => { position : 'relative', }} > - { __( 'Add more $10 to get FREE SHIPPING.', 'storegrowth-sales-booster' ) } + { __( 'Add more $10 to get...', 'storegrowth-sales-booster' ) }
+ + { __( 'Cart', 'storegrowth-sales-booster' ) } +
@@ -59,16 +64,24 @@
- +
+ + /** + * Banner text filter. + * + * @since 1.0.0 + */ + echo wp_kses_post( apply_filters( 'sales_boster_pd_banner_text', $banner_text ) ); + ?> + + + + + +
From f793d01fb41a2481f6031f69b2a16d7fb4a82d68 Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Sun, 18 Feb 2024 12:47:37 +0600 Subject: [PATCH 6/7] enhance: add-validation-for-cta-url-&-add-pro-prompts-for-direct-checkout-ui --- .../DirectCheckout/Includes/EnqueueScript.php | 18 ++- .../assets/src/components/Design.js | 123 +----------------- .../assets/src/components/Preview.js | 28 ++-- .../assets/src/components/DesignTab.js | 3 +- .../assets/src/components/DiscountBanner.js | 7 +- .../src/components/FreeShippingBarLayout.js | 19 +++ .../assets/src/components/SettingsTab.js | 4 +- assets/src/admin.scss | 4 + .../Modules/DirectCheckout/index.js | 99 ++++++++++++++ .../Panels/PanelSettings/Fields/TextInput.js | 5 +- 10 files changed, 167 insertions(+), 143 deletions(-) diff --git a/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php b/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php index 07c66359..615505a3 100644 --- a/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php +++ b/Includes/Modules/DirectCheckout/Includes/EnqueueScript.php @@ -109,12 +109,6 @@ private function dc_button_inline_styles() { $text_color = sgsb_find_option_setting( $settings, 'text_color', '#ffffff' ); $font_size = sgsb_find_option_setting( $settings, 'font_size', '16' ); $button_border_radius = sgsb_find_option_setting( $settings, 'button_border_radius', '5' ); - $button_border_style = sgsb_find_option_setting( $settings, 'button_border_style', 'solid' ); - $border_width = sgsb_find_option_setting( $settings, 'border_width', '1' ); - $border_color = sgsb_find_option_setting( $settings, 'border_color', '#008dff' ); - $horizontal_padding = sgsb_find_option_setting( $settings, 'paddingXaxis', '20' ); - $vertical_padding = sgsb_find_option_setting( $settings, 'paddingYaxis', '10' ); - $font_family = sgsb_find_option_setting( $settings, 'font_family', 'poppins' ); $theme = wp_get_theme(); $is_avada_theme = ! empty( $theme->name ) ? $theme->name === 'Avada' : false; @@ -133,9 +127,6 @@ private function dc_button_inline_styles() { font-size: {$font_size}px !important; color: {$text_color} !important; margin: {$button_margin}; - border: {$border_width}px {$button_border_style} {$border_color}; - padding: {$vertical_padding}px {$horizontal_padding}px; - font-family: {$font_family}; } "; if ( $is_avada_theme ) { @@ -203,6 +194,13 @@ private function dc_button_inline_styles() { '; } - wp_add_inline_style( 'sgsb-button-style', $custom_css ); + wp_add_inline_style( + 'sgsb-button-style', + apply_filters( + 'sgsb_direct_checkout_button_inline_styles', + $custom_css, + $settings + ) + ); } } diff --git a/Includes/Modules/DirectCheckout/assets/src/components/Design.js b/Includes/Modules/DirectCheckout/assets/src/components/Design.js index c05f98ad..d5cff8eb 100644 --- a/Includes/Modules/DirectCheckout/assets/src/components/Design.js +++ b/Includes/Modules/DirectCheckout/assets/src/components/Design.js @@ -7,7 +7,7 @@ import ColourPicker from "../../../../../../assets/src/components/settings/Panel import ActionsHandler from "sales-booster/src/components/settings/Panels/PanelSettings/ActionsHandler"; import { createDirectCheckoutForm } from "../helper"; import Switcher from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/Switcher"; -import {SelectBox} from "sales-booster/src/components/settings/Panels"; +import { applyFilters } from "@wordpress/hooks"; function Design({ onFormSave, upgradeTeaser }) { const { setCreateFromData } = useDispatch("sgsb_direct_checkout"); @@ -32,36 +32,6 @@ function Design({ onFormSave, upgradeTeaser }) { }); }; - const fontFamily = [ - { - value: 'poppins', - label: __('Poppins', 'storegrowth-sales-booster'), - }, - { - value: 'roboto', - label: __('Roboto', 'storegrowth-sales-booster'), - }, - { - value: 'lato', - label: __('Lato', 'storegrowth-sales-booster'), - }, - { - value: 'montserrat', - label: __('Montserrat', 'storegrowth-sales-booster'), - }, - { - value: 'ibm_plex_sans', - label: __('IBM Plex Sans', 'storegrowth-sales-booster'), - }, - ]; - - const borders = [ - { value: 'dotted', label: __( 'Dotted', 'storegrowth-sales-booster' ) }, - { value: 'dashed', label: __( 'Dashed', 'storegrowth-sales-booster' ) }, - { value: 'solid', label: __( 'Solid', 'storegrowth-sales-booster' ) }, - { value: 'none', label: __( 'No Border', 'storegrowth-sales-booster' ) }, - ]; - return ( @@ -89,18 +59,6 @@ function Design({ onFormSave, upgradeTeaser }) { title={__("Text Color", "storegrowth-sales-booster")} /> - - - - - - - - - - - + { applyFilters( + "sgsb_after_direct_checkout_button_design_settings", + "", + createDirectCheckoutFormData, + onFieldChange, + ) } ) } diff --git a/Includes/Modules/DirectCheckout/assets/src/components/Preview.js b/Includes/Modules/DirectCheckout/assets/src/components/Preview.js index 6e109ba9..cf5de0d3 100644 --- a/Includes/Modules/DirectCheckout/assets/src/components/Preview.js +++ b/Includes/Modules/DirectCheckout/assets/src/components/Preview.js @@ -1,21 +1,27 @@ import { Button } from "antd"; +import { applyFilters } from "@wordpress/hooks"; const Preview = ({storeData}) => { + const buttonStyles = applyFilters( + "sgsb_direct_checkout_button_preview_styles", + { + color : storeData?.text_color, + height : 'fit-content', + padding : '10px 30px', + fontSize : storeData?.font_size, + fontWeight : '600', + borderColor : storeData?.button_color, + borderRadius : storeData?.button_border_radius, + backgroundColor : storeData?.button_color + }, + storeData + ); + return (
diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js index 09f16656..974555c3 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js @@ -11,6 +11,7 @@ import Templates from './Templates'; function DesignTab(props) { const { + isValid, formData, setFormData, onFieldChange, @@ -102,7 +103,7 @@ function DesignTab(props) { ); diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js index 40e257b2..d4acbf9b 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js @@ -1,5 +1,6 @@ import { Fragment } from "react"; import { __ } from "@wordpress/i18n"; +import { useState } from "@wordpress/element"; import { applyFilters } from '@wordpress/hooks'; import SelectBox from "../../../../../../assets/src/components/settings/Panels/PanelSettings/Fields/SelectBox"; import Number from "../../../../../../assets/src/components/settings/Panels/PanelSettings/Fields/Number"; @@ -11,7 +12,7 @@ import Switcher from "sales-booster/src/components/settings/Panels/PanelSettings import TextInput from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/TextInput"; function DiscountBanner(props) { - const { formData, setFormData, setShowUndo, onFieldChange } = props; + const { isValid, formData, setFormData, setShowUndo, onFieldChange } = props; const barTypes = [ { @@ -59,7 +60,6 @@ function DiscountBanner(props) { { key: iconStyleName, value: } ) ); - const onBarChange = ( key, value ) => { setFormData( { ...formData, @@ -210,13 +210,14 @@ function DiscountBanner(props) { ) } /> { + const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name + '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path + '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string + '(\\#[-a-z\\d_]*)?$','i'); // fragment locator + return !!pattern.test( input ); + }; + const onFieldChange = (key, value) => { + if ( key === 'btn_target' ) { + setIsValidUrl( validateURL( value ) ); + } + setFormData({ ...formData, [key]: value, }); + setShowUndo( true ); }; @@ -181,6 +198,7 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod panel: ( onFormSave("design")} diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js index 82b739c5..3b3ededb 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js @@ -6,6 +6,7 @@ import {Fragment} from "react"; function SettingsTab(props) { const { + isValid, formData, setFormData, onFieldChange, @@ -19,6 +20,7 @@ function SettingsTab(props) { return (

Note: Please clear your cart in order to see the updates when you update diff --git a/assets/src/admin.scss b/assets/src/admin.scss index cf6ee9a9..b38ea749 100644 --- a/assets/src/admin.scss +++ b/assets/src/admin.scss @@ -2276,6 +2276,10 @@ End Settings Sidebar &.field-gap { margin-bottom: 15px; } + + &.error { + border-color: red; + } } &.textarea-field { diff --git a/assets/src/components/pro-previews/Modules/DirectCheckout/index.js b/assets/src/components/pro-previews/Modules/DirectCheckout/index.js index 7754d198..4064cd21 100644 --- a/assets/src/components/pro-previews/Modules/DirectCheckout/index.js +++ b/assets/src/components/pro-previews/Modules/DirectCheckout/index.js @@ -2,6 +2,10 @@ import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; import TextInput from "../../../settings/Panels/PanelSettings/Fields/TextInput"; import SingleCheckBox from "../../../settings/Panels/PanelSettings/Fields/SingleCheckBox"; +import {Fragment} from "react"; +import {SelectBox} from "../../../settings/Panels"; +import InputNumber from "../../../settings/Panels/PanelSettings/Fields/Number"; +import ColourPicker from "../../../settings/Panels/PanelSettings/Fields/ColorPicker"; // Handle direct checkout modules pro settings prompts. addFilter( @@ -95,3 +99,98 @@ addFilter( ); } ); +addFilter( + 'sgsb_after_direct_checkout_button_design_settings', + 'sgsb_after_direct_checkout_button_design_settings_callback', + () => { + const fontFamily = [ + { + value: 'poppins', + label: __('Poppins', 'storegrowth-sales-booster'), + } + ]; + + const borders = [ + { value: 'dotted', label: __( 'Dotted', 'storegrowth-sales-booster' ) } + ]; + + return ( + + + + + + + + + + + + + + ); + } +); diff --git a/assets/src/components/settings/Panels/PanelSettings/Fields/TextInput.js b/assets/src/components/settings/Panels/PanelSettings/Fields/TextInput.js index d93e59ce..84dcf203 100644 --- a/assets/src/components/settings/Panels/PanelSettings/Fields/TextInput.js +++ b/assets/src/components/settings/Panels/PanelSettings/Fields/TextInput.js @@ -9,9 +9,11 @@ const TextInput = ( { name, title, tooltip, + className, fieldValue, changeHandler, placeHolderText, + type = 'text', colSpan = 24, fullWidth = false, needUpgrade = false @@ -34,10 +36,11 @@ const TextInput = ( { {/* Handle settings textarea field by using dynamic props */} changeHandler( name, event.target.value ) } /> From 6dac16c8b3245622f0a8edb39b61beff538caee0 Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Tue, 20 Feb 2024 05:24:36 +0600 Subject: [PATCH 7/7] enhance: update-undo-state-&-make-it-individual-color-settings --- .../assets/src/components/DesignTab.js | 27 +++++------ .../src/components/SalesCountdownLayout.js | 43 ++++++++++++----- .../assets/src/components/Templates.js | 6 ++- .../assets/src/components/DesignTab.js | 36 ++++++++++---- .../src/components/FreeShippingBarLayout.js | 47 +++++++++++++++---- .../assets/src/components/Templates.js | 6 ++- assets/src/admin.scss | 10 ++-- .../PanelSettings/Fields/ColorPicker.js | 32 +++++++++---- .../Panels/PanelSettings/TabPanels.js | 5 +- .../settings/Panels/PanelSettings/index.js | 4 -- 10 files changed, 147 insertions(+), 69 deletions(-) diff --git a/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js b/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js index 934571a6..74bffcbf 100644 --- a/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js +++ b/Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js @@ -21,28 +21,36 @@ function DesignTab( props ) { noop, options, handleSelect, + undoHandler, + showUndoIcon } = props; return ( @@ -53,20 +61,11 @@ function DesignTab( props ) { /> - - - {/**/} - {/*

*/} - {/* {options.map((option, index) => (*/} - {/* handleSelect(option.theme)}*/} - {/* isSelected={option.theme === formData.selected_theme}*/} - {/* />*/} - {/* ))}*/} - {/*
*/} - {/**/} + ); } diff --git a/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js b/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js index 7b9fe2b0..bffc7fb2 100644 --- a/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js +++ b/Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js @@ -56,11 +56,6 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { ...initialSalesCountdownData, }); - const [showUndo, setShowUndo] = useState( false ); - const [undoData, setUndoData] = useState({ - ...initialSalesCountdownData, - }); - const onFormReset = () => { setFormData({ ...initialSalesCountdownData }); setShowUndo( false ); @@ -138,14 +133,40 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { onFieldChange("selected_theme", theme); }; + const [showUndo, setShowUndo] = useState({ + border_color : false, + heading_text_color : false, + widget_background_color : false + }); + + const [undoData, setUndoData] = useState({ + ...initialSalesCountdownData, + }); + + const colorKeyStack = [ + 'border_color', + 'heading_text_color', + 'widget_background_color' + ]; + const onFieldChange = (key, value) => { setFormData({ ...formData, [key]: value }); - setShowUndo( true ); + if ( colorKeyStack?.includes( key ) ) { + setShowUndo({ ...showUndo, [key]: true }); + } }; - const onUndoClick = () => { - setShowUndo( false ); - setFormData({ ...undoData }); + const onUndoClick = ( key ) => { + if ( colorKeyStack?.includes( key ) ) { + setShowUndo({ + ...showUndo, + [key]: false, + }); + setFormData({ + ...formData, + [key]: undoData?.[key], + }); + } }; const noop = () => {}; @@ -181,6 +202,8 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) { title: __("Design", "storegrowth-sales-booster"), panel: ( { +const Templates = ( { formData, setFormData, showUndoIcon } ) => { let templates = [ { key: 'ct-layout-1', component: }, { key: 'ct-layout-2', component: }, @@ -41,6 +41,10 @@ const Templates = ( { formData, setFormData } ) => { ); const onTemplateChange = ( name, value ) => { + for ( let key in showUndoIcon ) { + showUndoIcon[key] = false; + } + setFormData( { ...formData, ...templateStyles?.[ value ] diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js index 974555c3..7de427a1 100644 --- a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js +++ b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js @@ -19,6 +19,8 @@ function DesignTab(props) { buttonLoading, fontFamily, onFormReset, + undoHandler, + showUndoIcon } = props; return ( @@ -51,31 +53,39 @@ function DesignTab(props) { ) } { Boolean( formData.btn_style ) && ( @@ -83,22 +93,30 @@ function DesignTab(props) { ) } - + { setFormData({ ...initialShipData }); setShowUndo( false ); @@ -130,6 +125,28 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod return !!pattern.test( input ); }; + const [showUndo, setShowUndo] = useState({ + btn_color : false, + text_color : false, + icon_color : false, + btn_text_color : false, + close_icon_color : false, + background_color : false, + }); + + const [undoData, setUndoData] = useState({ + ...initialShipData, + }); + + const colorKeyStack = [ + 'btn_color', + 'text_color', + 'icon_color', + 'btn_text_color', + 'close_icon_color', + 'background_color' + ]; + const onFieldChange = (key, value) => { if ( key === 'btn_target' ) { setIsValidUrl( validateURL( value ) ); @@ -140,12 +157,22 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod [key]: value, }); - setShowUndo( true ); + if ( colorKeyStack?.includes( key ) ) { + setShowUndo({ ...showUndo, [key]: true }); + } }; - const onUndoClick = () => { - setShowUndo( false ); - setFormData({ ...undoData }); + const onUndoClick = ( key ) => { + if ( colorKeyStack?.includes( key ) ) { + setShowUndo({ + ...showUndo, + [key]: false, + }); + setFormData({ + ...formData, + [key]: undoData?.[key], + }); + } }; const changeTab = (key) => { @@ -213,6 +240,8 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod title: __("Design", "storegrowth-sales-booster"), panel: ( { +const Templates = ( { formData, setFormData, showUndoIcon } ) => { let templates = [ { key: 'shipping_bar_one', component: }, ]; @@ -46,6 +46,10 @@ const Templates = ( { formData, setFormData } ) => { ); const onTemplateChange = ( name, value ) => { + for ( let key in showUndoIcon ) { + showUndoIcon[key] = false; + } + setFormData( { ...formData, ...templateStyles?.[ value ] diff --git a/assets/src/admin.scss b/assets/src/admin.scss index b38ea749..9b1ec54d 100644 --- a/assets/src/admin.scss +++ b/assets/src/admin.scss @@ -2033,14 +2033,12 @@ End Settings Sidebar .settings-panel { margin-right: 32px; - .ant-tabs-extra-content { - .dashicons { + .dashicons { + color: #0875ff; + cursor: pointer; + &.dashicons-undo { color: #0875ff; cursor: pointer; - &.dashicons-undo { - color: #0875ff; - cursor: pointer; - } } } diff --git a/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js b/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js index 2fc1b48c..92fa9334 100644 --- a/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js +++ b/assets/src/components/settings/Panels/PanelSettings/Fields/ColorPicker.js @@ -10,10 +10,12 @@ const ColourPicker = ( { name, title, tooltip, + undoHandler, changeHandler, colSpan = 24, fieldValue = '#82B9FF', - needUpgrade = false + needUpgrade = false, + showUndoIcon = false, } ) => { const colors = [ '#000000', @@ -64,16 +66,26 @@ const ColourPicker = ( {
- {/* Handle settings color-picker field by using dynamic props */} - changeHandler( name, hex ) } - /> +
+ { showUndoIcon && undoHandler( name ) } className="dashicons dashicons-undo"> } + {/* Handle settings color-picker field by using dynamic props */} + changeHandler(name, hex)} + /> +
- { needUpgrade && } + {needUpgrade && } ); } diff --git a/assets/src/components/settings/Panels/PanelSettings/TabPanels.js b/assets/src/components/settings/Panels/PanelSettings/TabPanels.js index 8674dc25..13e12a99 100644 --- a/assets/src/components/settings/Panels/PanelSettings/TabPanels.js +++ b/assets/src/components/settings/Panels/PanelSettings/TabPanels.js @@ -2,16 +2,13 @@ import { Tabs } from "antd"; const { TabPane } = Tabs; -const TabPanels = ( { tabPanels, activeTab, changeHandler, classes, undoHandler, showUndoIcon = false } ) => { +const TabPanels = ( { tabPanels, activeTab, changeHandler, classes } ) => { return ( // Handle settings tab & panels preview by using props. ) - } } > { tabPanels && tabPanels?.map( tab => ( diff --git a/assets/src/components/settings/Panels/PanelSettings/index.js b/assets/src/components/settings/Panels/PanelSettings/index.js index 1db69094..cfe819f4 100644 --- a/assets/src/components/settings/Panels/PanelSettings/index.js +++ b/assets/src/components/settings/Panels/PanelSettings/index.js @@ -4,10 +4,8 @@ import TabPanels from "./TabPanels"; const PanelSettings = ( { tabPanels, activeTab, - undoHandler, changeHandler, colSpan = 12, - showUndoIcon = false } ) => { return ( // Handle settings column width dynamically by using colSpan. @@ -16,8 +14,6 @@ const PanelSettings = ( {