| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { useEffect, useState } from 'react'; |
| 3 |
import { Link } from 'react-router'; |
| 4 |
import { toast } from 'react-toastify'; |
| 5 |
import Button from '../../components/Button'; |
| 6 |
import CheckBox from '../../components/CheckBox'; |
| 7 |
import ComponentContainer from '../../components/ComponentContainer'; |
| 8 |
import LoadingSpinner from '../../components/LoadingSpinner'; |
| 9 |
import SingleSelect from '../../components/SingleSelect'; |
| 10 |
import { |
| 11 |
useGetSettingsQuery, |
| 12 |
useUpdateSettingsMutation, |
| 13 |
} from '../../features/settings/settingsApi'; |
| 14 |
import SettingsTitle from './components/SettingsTitle'; |
| 15 |
import SingleSelectRadio from './components/SingleSelectRadio'; |
| 16 |
const Settings = () => { |
| 17 |
const { data, isLoading } = useGetSettingsQuery(); |
| 18 |
const [ |
| 19 |
updateSettings, |
| 20 |
{ isLoading: updateLoading, isSuccess: updateSuccess }, |
| 21 |
] = useUpdateSettingsMutation(); |
| 22 |
const [settings, setSettings] = useState({}); |
| 23 |
|
| 24 |
useEffect(() => { |
| 25 |
if (data) { |
| 26 |
setSettings(data); |
| 27 |
} |
| 28 |
}, [data]); |
| 29 |
|
| 30 |
useEffect(() => { |
| 31 |
if (updateSuccess) { |
| 32 |
toast.success('Settings Updated'); |
| 33 |
} |
| 34 |
}, [updateSuccess]); |
| 35 |
|
| 36 |
const handleSettingChange = (key, value) => { |
| 37 |
setSettings((prevState) => ({ |
| 38 |
...prevState, |
| 39 |
[key]: value, |
| 40 |
})); |
| 41 |
}; |
| 42 |
|
| 43 |
const handleSettingSave = () => { |
| 44 |
updateSettings(settings); |
| 45 |
}; |
| 46 |
|
| 47 |
const items = { |
| 48 |
product_price_type: { |
| 49 |
regular_price: 'Regular Price', |
| 50 |
price: 'Sale Price', |
| 51 |
}, |
| 52 |
min_max_discount_amount: { |
| 53 |
min: 'Minimum', |
| 54 |
max: 'Maximum', |
| 55 |
}, |
| 56 |
discount_priority_type: { |
| 57 |
both: 'Both coupons and campaigns', |
| 58 |
// woocommerce_coupon: 'Only WooCommerce coupons', |
| 59 |
disco_campaign: 'Only Disco campaigns', |
| 60 |
}, |
| 61 |
on_sale_badge: { |
| 62 |
show_all: 'Show on sale badge', |
| 63 |
do_not_show: 'Do not show on sale badge', |
| 64 |
// show_for_campaigns: 'Show on sale badge only for campaigns', |
| 65 |
// show_for_wc: 'Show on sale badge only for WooCommerce', |
| 66 |
}, |
| 67 |
show_strike_through: { |
| 68 |
shop_page: true, |
| 69 |
product_pages: true, |
| 70 |
category_page: true, |
| 71 |
cart_page: true, |
| 72 |
}, |
| 73 |
}; |
| 74 |
|
| 75 |
if (isLoading) { |
| 76 |
return ( |
| 77 |
<div className="disco-h-96 disco-w-full disco-flex disco-justify-center disco-items-center"> |
| 78 |
<LoadingSpinner /> |
| 79 |
</div> |
| 80 |
); |
| 81 |
} |
| 82 |
|
| 83 |
return ( |
| 84 |
<div className="disco-mt-2.5 disco-mr-4 disco-ml-0.5 disco-flex disco-gap-4"> |
| 85 |
<div className="disco-flex-grow disco-border disco-bg-gray-50 disco-white disco-rounded-xl disco-p-5"> |
| 86 |
<div className="disco-border disco-border-t-0 disco-border-x-0 disco-border-b-white disco-mb-3"> |
| 87 |
<ComponentContainer |
| 88 |
heading={__('Settings', 'disco')} |
| 89 |
className="!disco-mt-0" |
| 90 |
/> |
| 91 |
</div> |
| 92 |
<div className="disco-bg-white disco-p-4 disco-border disco-border-white disco-rounded-xl"> |
| 93 |
<SettingsTitle |
| 94 |
title={__('Product Price Type', 'disco')} |
| 95 |
subtitle={__( |
| 96 |
'Choose product price type by which discount will be calculate.', |
| 97 |
'disco' |
| 98 |
)} |
| 99 |
className="disco-mb-2" |
| 100 |
url="https://discoplugin.com/docs/product-price-type/" |
| 101 |
> |
| 102 |
<SingleSelectRadio |
| 103 |
options={items.product_price_type} |
| 104 |
handleChange={(e) => |
| 105 |
handleSettingChange('product_price_type', e) |
| 106 |
} |
| 107 |
selected={settings.product_price_type} |
| 108 |
/> |
| 109 |
</SettingsTitle> |
| 110 |
|
| 111 |
<SettingsTitle |
| 112 |
title={__('Minimum Maximum Discount Amount', 'disco')} |
| 113 |
subtitle={__( |
| 114 |
"Choose discount's amount to define the maximum and minimum discounts.", |
| 115 |
'disco' |
| 116 |
)} |
| 117 |
className="disco-mb-2" |
| 118 |
url="https://discoplugin.com/docs/minimum-maximum-discount-amount/" |
| 119 |
> |
| 120 |
<SingleSelectRadio |
| 121 |
options={items.min_max_discount_amount} |
| 122 |
handleChange={(e) => |
| 123 |
handleSettingChange( |
| 124 |
'min_max_discount_amount', |
| 125 |
e |
| 126 |
) |
| 127 |
} |
| 128 |
selected={settings.min_max_discount_amount} |
| 129 |
/> |
| 130 |
</SettingsTitle> |
| 131 |
<SettingsTitle |
| 132 |
title={__('Coupons & Campaigns Behavior', 'disco')} |
| 133 |
subtitle={__( |
| 134 |
'Decide how WooCommerce coupons and Disco campaigns should work together.', |
| 135 |
'disco' |
| 136 |
)} |
| 137 |
className="disco-mb-2" |
| 138 |
url="https://discoplugin.com/docs/coupons-campaigns-behavior/" |
| 139 |
> |
| 140 |
<SingleSelect |
| 141 |
className="disco-bg-white disco-test-select-class" |
| 142 |
buttonClass="disco-min-w-[320px]" |
| 143 |
placeholder={__('Select Value', 'disco')} |
| 144 |
items={items?.discount_priority_type} |
| 145 |
selected={settings?.discount_priority_type ?? ''} |
| 146 |
onchange={(e) => { |
| 147 |
handleSettingChange( |
| 148 |
'discount_priority_type', |
| 149 |
e |
| 150 |
); |
| 151 |
}} |
| 152 |
/> |
| 153 |
</SettingsTitle> |
| 154 |
<SettingsTitle |
| 155 |
title={__('WooCommerce On-Sale Badge', 'disco')} |
| 156 |
subtitle={__( |
| 157 |
'Decide how WooCommerce on sale badge shows for any discount rules.', |
| 158 |
'disco' |
| 159 |
)} |
| 160 |
className="disco-mb-2" |
| 161 |
url="https://discoplugin.com/docs/woocommerce-on-sale-badge/" |
| 162 |
> |
| 163 |
<SingleSelect |
| 164 |
className="disco-bg-white disco-test-select-class" |
| 165 |
buttonClass="disco-min-w-[320px]" |
| 166 |
placeholder={__('Select Value', 'disco')} |
| 167 |
items={items?.on_sale_badge} |
| 168 |
selected={settings?.on_sale_badge ?? ''} |
| 169 |
onchange={(e) => { |
| 170 |
handleSettingChange('on_sale_badge', e); |
| 171 |
}} |
| 172 |
/> |
| 173 |
</SettingsTitle> |
| 174 |
<SettingsTitle |
| 175 |
title={__('Strikeout Price', 'disco')} |
| 176 |
subtitle={__( |
| 177 |
'Choose where the strike-through price appears across your store.', |
| 178 |
'disco' |
| 179 |
)} |
| 180 |
className="disco-mb-2 " |
| 181 |
url="https://discoplugin.com/docs/strikeout-price-settings/" |
| 182 |
> |
| 183 |
<div className="disco-flex disco-items-center disco-gap-8"> |
| 184 |
{Object.keys(items.show_strike_through).map( |
| 185 |
(key) => ( |
| 186 |
<CheckBox |
| 187 |
checked={ |
| 188 |
settings.show_strike_through?.[ |
| 189 |
key |
| 190 |
] ?? false |
| 191 |
} |
| 192 |
onChange={(checked) => { |
| 193 |
handleSettingChange( |
| 194 |
'show_strike_through', |
| 195 |
{ |
| 196 |
...settings.show_strike_through, |
| 197 |
[key]: checked, |
| 198 |
} |
| 199 |
); |
| 200 |
}} |
| 201 |
label={key |
| 202 |
?.replace(/_/g, ' ') |
| 203 |
?.replace(/\b\w/g, (char) => |
| 204 |
char.toUpperCase() |
| 205 |
)} |
| 206 |
key={key} |
| 207 |
/> |
| 208 |
) |
| 209 |
)} |
| 210 |
</div> |
| 211 |
</SettingsTitle> |
| 212 |
</div> |
| 213 |
<div className="disco-mt-8 disco-flex disco-justify-end disco-gap-4"> |
| 214 |
<Link to="/"> |
| 215 |
<Button type="transparent"> |
| 216 |
{__('Back', 'disco')} |
| 217 |
</Button> |
| 218 |
</Link> |
| 219 |
<Button |
| 220 |
disabled={updateLoading} |
| 221 |
onClick={handleSettingSave} |
| 222 |
> |
| 223 |
<span>{__('Save', 'disco')}</span> |
| 224 |
{updateLoading && <LoadingSpinner size={4} />} |
| 225 |
</Button> |
| 226 |
</div> |
| 227 |
</div> |
| 228 |
</div> |
| 229 |
); |
| 230 |
}; |
| 231 |
export default Settings; |
| 232 |
|
