message-store.phtml

<?php
declare(strict_types=1);

use Loki\Base\ViewModel\ModuleConfig;
use Magento\Framework\View\Element\Template;

/** @version 1.1.21 */
/** @var Template $block */
/** @var ModuleConfig $moduleConfig */

$moduleConfig = $block->getModuleConfig();
if ($moduleConfig->isEnabled('MageOS_AlpineMessages')) {
    return;
}

$fetchLocalStorage = !(bool)$block->getSkipLocalStorage();
$fetchCookies = !(bool)$block->getSkipCookies();
?>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('Message', {
            messages: [],
            fetchLocalStorage: <?= /* @noEscape */ $fetchLocalStorage ? 'true' : 'false' ?>,
            fetchCookies: <?= /* @noEscape */ $fetchLocalStorage ? 'true' : 'false' ?>,
            init() {
                if (this.fetchLocalStorage) {
                    // Listen for LocalStorage initialization and load messages once
                    document.addEventListener('loki:init:localstorage-store', async () => {
                        const messageSection = await Alpine.store('LocalStorage').get('messages');
                        if (messageSection && messageSection.messages) {
                            this.messages = [...this.messages, ...messageSection.messages];
                            this.reset();
                        }
                    }, { once: true });
                }
            },
            getMessages() {
                const cookieMessages = this.getCookieMessages();
                if (cookieMessages.length > 0) {
                    this.messages = [...this.messages, ...cookieMessages];
                    MageCookies.remove('mage-messages');
                }

                return this.messages;
            },
            getCookieMessages() {
                if (!this.fetchCookies) {
                    return [];
                }

                const cookieMessages = MageCookies.get('mage-messages') || [];
                if (!cookieMessages instanceof Array) {
                    MageCookies.remove('mage-messages');
                    return [];
                }

                return cookieMessages;
            },
            addMessage(type, text) {
                this.messages.push({type, text});
            },
            removeMessage(type, text) {
                this.messages = this.messages.filter(message => {
                    return !(message.type === type && message.text === text);
                });
            },
            async saveMessage(type, text) {
                const messages = await this.getMessagesFromStore();
                messages.push({type, text});
                this.setMessageInStore(messages);
            },
            addErrorMessage(text) {
                this.addMessage('error', text);
            },
            addWarningMessage(text) {
                this.addMessage('warning', text);
            },
            addSuccessMessage(text) {
                this.addMessage('success', text);
            },
            addNoticeMessage(text) {
                this.addMessage('notice', text);
            },
            reset() {
                this.getStore().set('messages', {
                    data_id: this.getStore().getNewSectionLifetime(),
                    messages: []
                });
            },
            async getMessagesFromStore() {
                const messagesSection = await this.getStore().get('messages');
                return messagesSection && messagesSection.messages ? messagesSection.messages : [];
            },
            setMessageInStore(messages) {
                this.getStore().set('messages', {
                    data_id: this.getStore().getNewSectionLifetime(),
                    messages
                });
            },
            getStore() {
                return Alpine.store('LocalStorage');
            }
        });
    });
</script>