Skip to content

Commit

Permalink
enhance: update-undo-state-&-make-it-individual-color-settings
Browse files Browse the repository at this point in the history
  • Loading branch information
@MdAsifHossainNadim
MdAsifHossainNadim committed Feb 19, 2024
1 parent f793d01 commit 6dac16c
Show file tree
Hide file tree
Showing 10 changed files with 147 additions and 69 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
43 changes: 32 additions & 11 deletions Includes/Modules/CountdownTimer/assets/src/components/SalesCountdownLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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 = () => {};
Expand Down Expand Up @@ -181,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 @@ -205,8 +228,6 @@ function SalesCountdownLayout({ navigate, useSearchParams ,moduleId}) {
<PanelRow>
<PanelSettings
tabPanels={tabPanels}
showUndoIcon={showUndo}
undoHandler={onUndoClick}
changeHandler={changeTab}
activeTab={tabName ? tabName : "general"}
colSpan={showPreview && tabName ? 12 : 24}
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
36 changes: 27 additions & 9 deletions Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ function DesignTab(props) {
buttonLoading,
fontFamily,
onFormReset,
undoHandler,
showUndoIcon
} = props;

return (
Expand Down Expand Up @@ -51,54 +53,70 @@ function DesignTab(props) {
) }

<ColourPicker
name={'background_color'}
colSpan={12}
fieldValue={formData.background_color}
name={'background_color'}
undoHandler={undoHandler}
changeHandler={onFieldChange}
fieldValue={formData.background_color}
showUndoIcon={showUndoIcon?.background_color}
title={__('Background Color', 'storegrowth-sales-booster')}
/>
<ColourPicker
name={'text_color'}
colSpan={12}
fieldValue={formData.text_color}
name={'text_color'}
undoHandler={undoHandler}
changeHandler={onFieldChange}
fieldValue={formData.text_color}
showUndoIcon={showUndoIcon?.text_color}
title={__('Text Color', 'storegrowth-sales-booster')}
/>
<ColourPicker
name={'icon_color'}
colSpan={12}
fieldValue={formData.icon_color}
name={'icon_color'}
undoHandler={undoHandler}
changeHandler={onFieldChange}
fieldValue={formData.icon_color}
showUndoIcon={showUndoIcon?.icon_color}
title={__('Icon Color', 'storegrowth-sales-booster')}
/>
<ColourPicker
name={'close_icon_color'}
colSpan={12}
undoHandler={undoHandler}
name={'close_icon_color'}
changeHandler={onFieldChange}
fieldValue={formData.close_icon_color}
showUndoIcon={showUndoIcon?.close_icon_color}
title={__('Close Button Color', 'storegrowth-sales-booster')}
/>
{ Boolean( formData.btn_style ) && (
<Fragment>
<ColourPicker
colSpan={12}
name={'btn_color'}
fieldValue={formData.btn_color}
undoHandler={undoHandler}
changeHandler={onFieldChange}
fieldValue={formData.btn_color}
showUndoIcon={showUndoIcon?.btn_color}
title={__('CTA Background', 'storegrowth-sales-booster')}
/>
<ColourPicker
colSpan={12}
name={'btn_text_color'}
undoHandler={undoHandler}
changeHandler={onFieldChange}
fieldValue={formData.btn_text_color}
showUndoIcon={showUndoIcon?.btn_text_color}
title={__( 'CTA Text Color', 'storegrowth-sales-booster')}
/>
</Fragment>
) }
</SettingsSection>

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

<ActionsHandler
resetHandler={onFormReset}
Expand Down
47 changes: 38 additions & 9 deletions Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,6 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod

const [formData, setFormData] = useState({ ...initialShipData });

const [showUndo, setShowUndo] = useState( false );
const [undoData, setUndoData] = useState({
...initialShipData,
});

const onFormReset = () => {
setFormData({ ...initialShipData });
setShowUndo( false );
Expand Down Expand Up @@ -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 ) );
Expand All @@ -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) => {
Expand Down Expand Up @@ -213,6 +240,8 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
title: __("Design", "storegrowth-sales-booster"),
panel: (
<DesignTab
showUndoIcon={showUndo}
undoHandler={onUndoClick}
formData={formData}
isValid={isValidUrl}
setFormData={setFormData}
Expand Down
6 changes: 5 additions & 1 deletion Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import ShippingBarOne from "./Templates/ShippingBarOne";
import {applyFilters} from "@wordpress/hooks";
import RadioTemplate from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/RadioTemplate";

const Templates = ( { formData, setFormData } ) => {
const Templates = ( { formData, setFormData, showUndoIcon } ) => {
let templates = [
{ key: 'shipping_bar_one', component: <ShippingBarOne /> },
];
Expand Down Expand Up @@ -46,6 +46,10 @@ const Templates = ( { formData, setFormData } ) => {
);

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

setFormData( {
...formData,
...templateStyles?.[ value ]
Expand Down
10 changes: 4 additions & 6 deletions assets/src/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

Expand Down
Loading

0 comments on commit 6dac16c

Please sign in to comment.