From f793d01fb41a2481f6031f69b2a16d7fb4a82d68 Mon Sep 17 00:00:00 2001 From: MdAsifHossainNadim Date: Sun, 18 Feb 2024 12:47:37 +0600 Subject: [PATCH] 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 ) } />