2024-02-18 23:05:15 +00:00
|
|
|
import variables from 'config/variables';
|
2023-03-21 19:59:16 +00:00
|
|
|
import { PureComponent } from 'react';
|
2022-07-25 22:06:07 +00:00
|
|
|
import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
|
2021-09-17 12:39:55 +00:00
|
|
|
import { toast } from 'react-toastify';
|
2022-04-16 18:25:42 +00:00
|
|
|
import { TextareaAutosize } from '@mui/material';
|
2021-09-15 21:38:24 +00:00
|
|
|
|
2024-02-18 23:05:15 +00:00
|
|
|
import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
|
2024-02-23 18:54:42 +00:00
|
|
|
import { Button } from 'components/Elements';
|
2024-02-19 09:42:59 +00:00
|
|
|
import EventBus from 'utils/eventbus';
|
2021-09-17 12:39:55 +00:00
|
|
|
|
2024-02-24 20:17:11 +00:00
|
|
|
class MessageOptions extends PureComponent {
|
2021-09-17 12:39:55 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
2022-08-15 21:01:22 +00:00
|
|
|
messages: JSON.parse(localStorage.getItem('messages')) || [],
|
2021-09-17 12:39:55 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
reset = () => {
|
2022-08-15 21:01:22 +00:00
|
|
|
localStorage.setItem('messages', '[]');
|
2021-09-17 12:39:55 +00:00
|
|
|
this.setState({
|
2022-08-15 21:01:22 +00:00
|
|
|
messages: [],
|
2021-09-17 12:39:55 +00:00
|
|
|
});
|
2022-08-26 09:45:32 +00:00
|
|
|
toast(variables.getMessage(this.languagecode, 'toasts.reset'));
|
2023-03-16 11:11:18 +00:00
|
|
|
EventBus.emit('refresh', 'message');
|
2022-04-08 13:48:36 +00:00
|
|
|
};
|
2021-09-17 12:39:55 +00:00
|
|
|
|
|
|
|
modifyMessage(type, index) {
|
|
|
|
const messages = this.state.messages;
|
|
|
|
if (type === 'add') {
|
2022-06-04 10:58:01 +00:00
|
|
|
messages.push('');
|
2021-09-17 12:39:55 +00:00
|
|
|
} else {
|
|
|
|
messages.splice(index, 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
2022-04-08 13:48:36 +00:00
|
|
|
messages,
|
2021-09-17 12:39:55 +00:00
|
|
|
});
|
|
|
|
this.forceUpdate();
|
|
|
|
|
|
|
|
localStorage.setItem('messages', JSON.stringify(messages));
|
|
|
|
}
|
|
|
|
|
|
|
|
message(e, text, index) {
|
2022-04-08 13:48:36 +00:00
|
|
|
const result = text === true ? e.target.value : e.target.result;
|
2021-09-17 12:39:55 +00:00
|
|
|
|
|
|
|
const messages = this.state.messages;
|
|
|
|
messages[index] = result;
|
|
|
|
this.setState({
|
2022-04-08 13:48:36 +00:00
|
|
|
messages,
|
2021-09-17 12:39:55 +00:00
|
|
|
});
|
|
|
|
this.forceUpdate();
|
|
|
|
|
|
|
|
localStorage.setItem('messages', JSON.stringify(messages));
|
2022-04-08 13:48:36 +00:00
|
|
|
document.querySelector('.reminder-info').style.display = 'flex';
|
2021-09-17 12:39:55 +00:00
|
|
|
localStorage.setItem('showReminder', true);
|
|
|
|
}
|
2022-04-08 13:48:36 +00:00
|
|
|
|
2021-09-17 12:39:55 +00:00
|
|
|
render() {
|
2024-02-06 18:44:32 +00:00
|
|
|
const MESSAGE_SECTION = 'modals.main.settings.sections.message';
|
|
|
|
|
2021-09-17 12:39:55 +00:00
|
|
|
return (
|
|
|
|
<>
|
2022-04-08 13:48:36 +00:00
|
|
|
<Header
|
2024-02-06 18:44:32 +00:00
|
|
|
title={variables.getMessage(`${MESSAGE_SECTION}.title`)}
|
2022-04-08 13:48:36 +00:00
|
|
|
setting="message"
|
|
|
|
category="message"
|
|
|
|
element=".message"
|
|
|
|
zoomSetting="zoomMessage"
|
2024-02-10 19:39:15 +00:00
|
|
|
visibilityToggle={true}
|
2022-04-08 13:48:36 +00:00
|
|
|
/>
|
2024-02-10 19:39:15 +00:00
|
|
|
<PreferencesWrapper setting="message" visibilityToggle={true} zoomSetting="zoomMessage">
|
2024-02-09 22:22:11 +00:00
|
|
|
<Row final={true}>
|
|
|
|
<Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
|
|
|
|
<Action>
|
2024-02-23 18:54:42 +00:00
|
|
|
<Button
|
|
|
|
type="settings"
|
|
|
|
onClick={() => this.modifyMessage('add')}
|
|
|
|
icon={<MdAdd />}
|
|
|
|
label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
|
|
|
|
/>
|
2024-02-09 22:22:11 +00:00
|
|
|
</Action>
|
|
|
|
</Row>
|
2024-02-07 23:43:23 +00:00
|
|
|
<div className="messagesContainer">
|
|
|
|
{this.state.messages.map((_url, index) => (
|
|
|
|
<div className="messageMap" key={index}>
|
|
|
|
<div className="flexGrow">
|
|
|
|
<div className="icon">
|
|
|
|
<MdOutlineTextsms />
|
|
|
|
</div>
|
|
|
|
<div className="messageText">
|
|
|
|
<span className="subtitle">
|
|
|
|
{variables.getMessage(`${MESSAGE_SECTION}.title`)}
|
|
|
|
</span>
|
|
|
|
<TextareaAutosize
|
|
|
|
value={this.state.messages[index]}
|
|
|
|
placeholder={variables.getMessage(
|
|
|
|
'modals.main.settings.sections.message.content',
|
|
|
|
)}
|
|
|
|
onChange={(e) => this.message(e, true, index)}
|
|
|
|
varient="outlined"
|
|
|
|
style={{ padding: '0' }}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-07-25 22:06:07 +00:00
|
|
|
</div>
|
2024-02-07 23:43:23 +00:00
|
|
|
<div>
|
|
|
|
<div className="messageAction">
|
2024-03-18 22:08:08 +00:00
|
|
|
<Button type="settings" onClick={() => this.modifyMessage('remove', index)} icon={<MdCancel />} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} />
|
2024-02-07 23:43:23 +00:00
|
|
|
</div>
|
2022-07-25 22:06:07 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-02-07 23:43:23 +00:00
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
{this.state.messages.length === 0 && (
|
|
|
|
<div className="photosEmpty">
|
|
|
|
<div className="emptyNewMessage">
|
|
|
|
<MdOutlineTextsms />
|
|
|
|
<span className="title">
|
|
|
|
{variables.getMessage(`${MESSAGE_SECTION}.no_messages`)}
|
|
|
|
</span>
|
|
|
|
<span className="subtitle">
|
|
|
|
{variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
|
|
|
|
</span>
|
2024-02-23 18:54:42 +00:00
|
|
|
<Button
|
|
|
|
type="settings"
|
|
|
|
onClick={() => this.modifyMessage('add')}
|
|
|
|
icon={<MdAdd />}
|
|
|
|
label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
|
|
|
|
/>
|
2022-07-25 22:06:07 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-02-07 23:43:23 +00:00
|
|
|
)}
|
|
|
|
</PreferencesWrapper>
|
2021-09-17 12:39:55 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2021-09-15 21:38:24 +00:00
|
|
|
}
|
2024-02-24 20:17:11 +00:00
|
|
|
|
|
|
|
export { MessageOptions as default, MessageOptions };
|