Skip to content

Commit

Permalink
Merge pull request #384 from Invizo/enhance/admin-ui/sales-countdown/…
Browse files Browse the repository at this point in the history 
…implement-product-countdown-bulk-addition

enhance/implement-product-sales-countdown-bulk-addition
  • Loading branch information
@code-with-mehedi
code-with-mehedi authored Feb 21, 2024
2 parents 1d1cf71 + 6dac16c commit 4848583
Show file tree
Hide file tree
Showing 29 changed files with 644 additions and 194 deletions.
27 changes: 13 additions & 14 deletions Includes/Modules/CountdownTimer/assets/src/components/DesignTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,36 @@ function DesignTab( props ) {
noop,
options,
handleSelect,
undoHandler,
showUndoIcon
} = props;

return (
<Fragment>
<SettingsSection>
<ColourPicker
undoHandler={undoHandler}
name={"widget_background_color"}
fieldValue={formData.widget_background_color}
showUndoIcon={showUndoIcon?.widget_background_color}
changeHandler={onFieldChange}
title={__("Widget Background Color", "storegrowth-sales-booster")}
/>

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

<ColourPicker
undoHandler={undoHandler}
name={"heading_text_color"}
fieldValue={formData.heading_text_color}
showUndoIcon={showUndoIcon?.heading_text_color}
changeHandler={onFieldChange}
title={__("Heading Text Color", "storegrowth-sales-booster")}
/>
Expand All @@ -53,20 +61,11 @@ function DesignTab( props ) {
/>
</SettingsSection>

<Templates formData={ formData } setFormData={ setFormData } />

{/*<Form.Item label="Theme" labelAlign="left">*/}
{/* <div className="sgsb-countdown-theme">*/}
{/* {options.map((option, index) => (*/}
{/* <Selector*/}
{/* key={index}*/}
{/* option={option}*/}
{/* onSelect={() => handleSelect(option.theme)}*/}
{/* isSelected={option.theme === formData.selected_theme}*/}
{/* />*/}
{/* ))}*/}
{/* </div>*/}
{/*</Form.Item>*/}
<Templates
formData={ formData }
setFormData={ setFormData }
showUndoIcon={ showUndoIcon }
/>
</Fragment>
);
}
Expand Down
40 changes: 39 additions & 1 deletion Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {

const onFormReset = () => {
setFormData({ ...initialSalesCountdownData });
setShowUndo( false );
};

const changeTab = (key) => {
Expand Down Expand Up @@ -96,8 +97,10 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
data: data,
})
.success(() => {
setShowUndo(false);
setButtonLoading(false);
notificationMessage(type);
setUndoData({ ...formData });
});
};

Expand All @@ -116,6 +119,7 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
.success((response) => {
if (response.success) {
setFormData({ ...formData, ...response.data });
setUndoData({ ...undoData, ...response.data });
setTimeout(() => setPageLoading(false), 500);
}
});
Expand All @@ -129,8 +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 });
if ( colorKeyStack?.includes( key ) ) {
setShowUndo({ ...showUndo, [key]: true });
}
};

const onUndoClick = ( key ) => {
if ( colorKeyStack?.includes( key ) ) {
setShowUndo({
...showUndo,
[key]: false,
});
setFormData({
...formData,
[key]: undoData?.[key],
});
}
};

const noop = () => {};
Expand Down Expand Up @@ -166,6 +202,8 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
title: __("Design", "storegrowth-sales-booster"),
panel: (
<DesignTab
showUndoIcon={ showUndo }
undoHandler={ onUndoClick }
formData={ formData }
setFormData={ setFormData }
onFieldChange={ onFieldChange }
Expand All @@ -189,10 +227,10 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
<PanelContainer>
<PanelRow>
<PanelSettings
colSpan={showPreview && tabName ? 12 : 24}
tabPanels={tabPanels}
changeHandler={changeTab}
activeTab={tabName ? tabName : "general"}
colSpan={showPreview && tabName ? 12 : 24}
/>
{showPreview && tabName && (
<PanelPreview colSpan={12}>
Expand Down
6 changes: 5 additions & 1 deletion Includes/Modules/CountdownTimer/assets/src/components/Templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {applyFilters} from "@wordpress/hooks";
import RadioTemplate from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/RadioTemplate";
import CountDownTwo from "./Templates/CountDownTwo";

const Templates = ( { formData, setFormData } ) => {
const Templates = ( { formData, setFormData, showUndoIcon } ) => {
let templates = [
{ key: 'ct-layout-1', component: <CountDownOne /> },
{ key: 'ct-layout-2', component: <CountDownTwo /> },
Expand Down Expand Up @@ -41,6 +41,10 @@ const Templates = ( { formData, setFormData } ) => {
);

const onTemplateChange = ( name, value ) => {
for ( let key in showUndoIcon ) {
showUndoIcon[key] = false;
}

setFormData( {
...formData,
...templateStyles?.[ value ]
Expand Down
9 changes: 8 additions & 1 deletion Includes/Modules/DirectCheckout/Includes/EnqueueScript.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,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
)
);
}
}
115 changes: 68 additions & 47 deletions Includes/Modules/DirectCheckout/assets/src/components/Design.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { applyFilters } from "@wordpress/hooks";

function Design({ onFormSave, upgradeTeaser }) {
const { setCreateFromData } = useDispatch("sgsb_direct_checkout");
Expand Down Expand Up @@ -33,57 +35,76 @@ function Design({ onFormSave, upgradeTeaser }) {
return (
<Fragment>
<SettingsSection>
<ColourPicker
name={"button_color"}
fieldValue={createDirectCheckoutFormData.button_color}
changeHandler={onFieldChange}
title={__("Button Color", "storegrowth-sales-booster")}
<Switcher
name={ 'button_style' }
changeHandler={ onFieldChange }
isEnable={ Boolean( createDirectCheckoutFormData.button_style ) }
title={ __( 'Button Style', 'storegrowth-sales-booster' ) }
tooltip={ __( 'Will be able to achieve the control of the button style in the product.', 'storegrowth-sales-booster' ) }
/>

<ColourPicker
name={"text_color"}
fieldValue={createDirectCheckoutFormData.text_color}
changeHandler={onFieldChange}
title={__("Text Color", "storegrowth-sales-booster")}
/>
{ Boolean( createDirectCheckoutFormData.button_style ) && (
<Fragment>
<ColourPicker
name={"button_color"}
fieldValue={createDirectCheckoutFormData.button_color}
changeHandler={onFieldChange}
title={__("Button Color", "storegrowth-sales-booster")}
/>

<Number
min={1}
max={100}
addonAfter={"px"}
style={{
width: "100px",
textAlign: "center",
}}
name={`font_size`}
fieldValue={createDirectCheckoutFormData.font_size}
changeHandler={onFieldChange}
title={__("Font Size", "storegrowth-sales-booster")}
placeHolderText={__("Font Size", "storegrowth-sales-booster")}
tooltip={__(
"To set the size of the font",
"storegrowth-sales-booster"
)}
/>
<ColourPicker
name={"text_color"}
fieldValue={createDirectCheckoutFormData.text_color}
changeHandler={onFieldChange}
title={__("Text Color", "storegrowth-sales-booster")}
/>

<Number
min={1}
max={100}
style={{
width: "100px",
textAlign: "center",
}}
addonAfter={"px"}
name={"button_border_radius"}
fieldValue={createDirectCheckoutFormData.button_border_radius}
changeHandler={onFieldChange}
title={__("Border Radius", "storegrowth-sales-booster")}
placeHolderText={__("Border Radius", "storegrowth-sales-booster")}
tooltip={__(
"To set the border radius of the button",
"storegrowth-sales-booster"
)}
/>
<Number
min={1}
max={100}
addonAfter={"px"}
style={{
width: "100px",
textAlign: "center",
}}
name={`font_size`}
fieldValue={createDirectCheckoutFormData.font_size}
changeHandler={onFieldChange}
title={__("Font Size", "storegrowth-sales-booster")}
placeHolderText={__("Font Size", "storegrowth-sales-booster")}
tooltip={__(
"To set the size of the font",
"storegrowth-sales-booster"
)}
/>

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

{ applyFilters(
"sgsb_after_direct_checkout_button_design_settings",
"",
createDirectCheckoutFormData,
onFieldChange,
) }
</Fragment>
) }
</SettingsSection>

<ActionsHandler
Expand Down
31 changes: 20 additions & 11 deletions Includes/Modules/DirectCheckout/assets/src/components/Preview.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +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,
borderRadius:storeData?.button_border_radius,
borderColor:storeData?.button_color,
fontSize:storeData?.font_size,
backgroundColor:storeData?.button_color,
height:"fit-content",
padding:"10px 30px",
fontWeight:"600"
}}
<Button
type="primary"
size={"large"}
style={buttonStyles}
>
{storeData?.buy_now_button_label === "" ? "Enter Text" : storeData?.buy_now_button_label}
</Button>
Expand Down
27 changes: 17 additions & 10 deletions Includes/Modules/DirectCheckout/assets/src/helper.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import { __ } from '@wordpress/i18n';

export const createDirectCheckoutForm = {
buy_now_button_setting: __( 'cart-with-buy-now', 'storegrowth-sales-booster' ),
buy_now_button_label: __( 'Buy Now', 'storegrowth-sales-booster' ),
checkout_redirect: 'legacy-checkout',
shop_page_checkout_enable: true,
product_page_checkout_enable: true,
button_color: "#008dff",
text_color: "#ffffff",
font_size: 16,
button_border_radius: 5,
generated_link:"example",
font_size : 16,
text_color : "#ffffff",
font_family : "poppins",
button_style : true,
button_color : "#008dff",
border_color : "#008dff",
border_width : 1,
paddingXaxis : 20,
paddingYaxis : 10,
generated_link : "example",
checkout_redirect : 'legacy-checkout',
button_border_style : "solid",
button_border_radius : 5,
buy_now_button_label : __( 'Buy Now', 'storegrowth-sales-booster' ),
buy_now_button_setting : __( 'cart-with-buy-now', 'storegrowth-sales-booster' ),
shop_page_checkout_enable : true,
product_page_checkout_enable : true,
};
Loading

0 comments on commit 4848583

Please sign in to comment.