Skip to content

Commit

Permalink
enhance: add-validation-for-cta-url-&-add-pro-prompts-for-direct-chec…
Browse files Browse the repository at this point in the history 
…kout-ui
  • Loading branch information
@MdAsifHossainNadim
MdAsifHossainNadim committed Feb 18, 2024
1 parent fdc8180 commit f793d01
Show file tree
Hide file tree
Showing 10 changed files with 167 additions and 143 deletions.
18 changes: 8 additions & 10 deletions Includes/Modules/DirectCheckout/Includes/EnqueueScript.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 ) {
Expand Down Expand Up @@ -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
)
);
}
}
123 changes: 7 additions & 116 deletions Includes/Modules/DirectCheckout/assets/src/components/Design.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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 (
<Fragment>
<SettingsSection>
Expand Down Expand Up @@ -89,18 +59,6 @@ function Design({ onFormSave, upgradeTeaser }) {
title={__("Text Color", "storegrowth-sales-booster")}
/>

<SelectBox
name={ `font_family` }
options={ [ ...fontFamily ] }
fieldValue={ createDirectCheckoutFormData.font_family }
changeHandler={ onFieldChange }
title={ __( "Font Family", "storegrowth-sales-booster" ) }
tooltip={ __(
"Select your desired font family",
"storegrowth-sales-booster"
) }
/>

<Number
min={1}
max={100}
Expand All @@ -120,44 +78,6 @@ function Design({ onFormSave, upgradeTeaser }) {
)}
/>

<Number
min={1}
max={100}
style={{
width: "100px",
textAlign: "center",
}}
addonAfter={"px"}
name={"paddingXaxis"}
fieldValue={createDirectCheckoutFormData.paddingXaxis}
changeHandler={onFieldChange}
title={__("Horizontal Padding", "storegrowth-sales-booster")}
placeHolderText={__("Button Horizontal Padding", "storegrowth-sales-booster")}
tooltip={__(
"To set the horizontal padding of the button",
"storegrowth-sales-booster"
)}
/>

<Number
min={1}
max={100}
style={{
width: "100px",
textAlign: "center",
}}
addonAfter={"px"}
name={"paddingYaxis"}
fieldValue={createDirectCheckoutFormData.paddingYaxis}
changeHandler={onFieldChange}
title={__("Vertical Padding", "storegrowth-sales-booster")}
placeHolderText={__("Button Vertical Padding", "storegrowth-sales-booster")}
tooltip={__(
"To set the vertical padding of the button",
"storegrowth-sales-booster"
)}
/>

<Number
min={1}
max={100}
Expand All @@ -177,41 +97,12 @@ function Design({ onFormSave, upgradeTeaser }) {
)}
/>

<Number
min={1}
max={20}
style={{
width: "100px",
textAlign: "center",
}}
addonAfter={"px"}
name={"border_width"}
fieldValue={createDirectCheckoutFormData.border_width}
changeHandler={onFieldChange}
title={__("Border Width", "storegrowth-sales-booster")}
placeHolderText={__("Button Border Width", "storegrowth-sales-booster")}
tooltip={__(
"To set the border width of the button",
"storegrowth-sales-booster"
)}
/>

<ColourPicker
name={"border_color"}
fieldValue={createDirectCheckoutFormData.border_color}
changeHandler={onFieldChange}
title={__("Border Color", "storegrowth-sales-booster")}
/>

<SelectBox
options={ [ ...borders ] }
name={ `button_border_style` }
changeHandler={ onFieldChange }
fieldValue={ createDirectCheckoutFormData.button_border_style }
title={ __( 'Overview Border', 'storegrowth-sales-booster' ) }
placeHolderText={ __( 'Change Overview Border', 'storegrowth-sales-booster' ) }
tooltip={ __( 'The Style of the order bump border.', 'storegrowth-sales-booster' ) }
/>
{ applyFilters(
"sgsb_after_direct_checkout_button_design_settings",
"",
createDirectCheckoutFormData,
onFieldChange,
) }
</Fragment>
) }
</SettingsSection>
Expand Down
28 changes: 17 additions & 11 deletions Includes/Modules/DirectCheckout/assets/src/components/Preview.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<Button
type="primary"
size={"large"}
style={{
color : storeData?.text_color,
border : `${storeData?.border_width}px ${storeData?.button_border_style} ${storeData?.border_color}`,
height : "fit-content",
padding : `${storeData?.paddingYaxis}px ${storeData?.paddingXaxis}px`,
fontSize : storeData?.font_size,
fontWeight : "600",
fontFamily : storeData?.font_family,
borderRadius : storeData?.button_border_radius,
backgroundColor : storeData?.button_color
}}
style={buttonStyles}
>
{storeData?.buy_now_button_label === "" ? "Enter Text" : storeData?.buy_now_button_label}
</Button>
Expand Down
3 changes: 2 additions & 1 deletion Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Templates from './Templates';

function DesignTab(props) {
const {
isValid,
formData,
setFormData,
onFieldChange,
Expand Down Expand Up @@ -102,7 +103,7 @@ function DesignTab(props) {
<ActionsHandler
resetHandler={onFormReset}
loadingHandler={buttonLoading}
saveHandler={onFormSave}
saveHandler={isValid && onFormSave}
/>
</Fragment>
);
Expand Down
7 changes: 4 additions & 3 deletions Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 = [
{
Expand Down Expand Up @@ -59,7 +60,6 @@ function DiscountBanner(props) {
{ key: iconStyleName, value: <BarIcon activeIcon={ formData?.progressive_banner_icon_name === iconStyleName } iconName={ iconStyleName } /> }
) );


const onBarChange = ( key, value ) => {
setFormData( {
...formData,
Expand Down Expand Up @@ -210,13 +210,14 @@ function DiscountBanner(props) {
) }
/>
<TextInput
type={ 'url' }
name={ 'btn_target' }
placeHolderText={ __(
'Write CTA button target url',
'storegrowth-sales-booster'
) }
fieldValue={ formData.btn_target }
className={ `settings-field input-field` }
className={ !isValid ? 'error' : '' }
changeHandler={ onFieldChange }
title={ __( 'CTA Target URI', 'storegrowth-sales-booster' ) }
tooltip={ __(
Expand Down
19 changes: 19 additions & 0 deletions Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,28 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
getSettings();
}, []);

const [ isValidUrl, setIsValidUrl ] = useState( true );

const validateURL = ( input ) => {
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 );
};

Expand Down Expand Up @@ -181,6 +198,7 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
panel: (
<SettingsTab
formData={formData}
isValid={isValidUrl}
setFormData={setFormData}
setShowUndo={setShowUndo}
onFieldChange={onFieldChange}
Expand All @@ -196,6 +214,7 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
panel: (
<DesignTab
formData={formData}
isValid={isValidUrl}
setFormData={setFormData}
onFieldChange={onFieldChange}
onFormSave={() => onFormSave("design")}
Expand Down
4 changes: 3 additions & 1 deletion Includes/Modules/ProgressiveDiscountBanner/assets/src/components/SettingsTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {Fragment} from "react";

function SettingsTab(props) {
const {
isValid,
formData,
setFormData,
onFieldChange,
Expand All @@ -19,6 +20,7 @@ function SettingsTab(props) {
return (
<Fragment>
<DiscountBanner
isValid={isValid}
formData={formData}
setShowUndo={setShowUndo}
setFormData={setFormData}
Expand All @@ -28,7 +30,7 @@ function SettingsTab(props) {
<ActionsHandler
resetHandler={onFormReset}
loadingHandler={buttonLoading}
saveHandler={onFormSave}
saveHandler={isValid && onFormSave}
/>
<p className="ant-form-item-explain" style={{ margin: "15px 0 0 0" }}>
Note: Please clear your cart in order to see the updates when you update
Expand Down
4 changes: 4 additions & 0 deletions assets/src/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2276,6 +2276,10 @@ End Settings Sidebar
&.field-gap {
margin-bottom: 15px;
}

&.error {
border-color: red;
}
}

&.textarea-field {
Expand Down
Loading

0 comments on commit f793d01

Please sign in to comment.