Properly implement section invalidation from Luma customerData JS

Author: jissereitsma

view/frontend/layout/loki_base.xml

@@ -28,7 +28,12 @@
             </container>
 
             <container name="loki.store">
-                <block name="loki.store.local-storage" template="Loki_Base::script/store/localstorage-store.phtml"/>
+                <block name="loki.store.local-storage" template="Loki_Base::script/store/localstorage-store.phtml">
+                    <arguments>
+                        <argument name="section_config" xsi:type="object">Loki\Base\ViewModel\SectionConfig</argument>
+                    </arguments>
+                </block>
+
                 <block name="loki.store.messages" template="Loki_Base::script/store/message-store.phtml"/>
             </container>
 

view/frontend/templates/script/store/localstorage-store.phtml

@@ -2,16 +2,19 @@
 declare(strict_types=1);
 
 
+use Loki\Base\ViewModel\SectionConfig;
 use Magento\Framework\View\Element\Template;
 
 /** @var Template $block */
+/** @var SectionConfig $sectionConfig */
 
-// @todo: Invalidate sections based on data_id
+$sectionConfig = $block->getSectionConfig();
 ?>
 <script>
     document.addEventListener('alpine:init', () => {
         Alpine.store('LokiLocalStorage', {
             key: 'mage-cache-storage',
+            sectionLifetime: <?= (int)$sectionConfig->getSectionDataLifeTime() * 60 ?>,
             data: {},
             init() {
                 const storedData = localStorage.getItem(this.key);
@@ -22,25 +25,41 @@ use Magento\Framework\View\Element\Template;
                 }
 
                 let changed = false;
+                const cookieSections = LokiCookies.get('section_data_ids') || {};
+
                 Object.entries(this.data).forEach(([key, value]) => {
-                    if (value.data_id && value.data_id < Date. now()) {
+                    const isSectionExpired = !value.data_id || parseInt(value.data_id) + this.sectionLifetime < this.getCurrentTimestamp();
+                    const isCookieSectionExpired = cookieSections[key] && cookieSections[key] + this.sectionLifetime < this.getCurrentTimestamp();
+
+                    if (isSectionExpired || isCookieSectionExpired) {
                         delete this.data[key];
                         changed = true;
                     }
                 })
 
-
                 if (changed) {
                     localStorage.setItem(this.key, JSON.stringify(this.data));
                 }
             },
+            getNewSectionLifetime() {
+                return this.getCurrentTimestamp() + this.sectionLifetime;
+            },
+            getCurrentTimestamp() {
+                return Math.floor(Date.now() / 1000);
+            },
             save() {
                 localStorage.setItem(this.key, JSON.stringify(this.data));
             },
-            refresh(sections) {
-                let url = LOKI_BASE_URL + '/customer/section/load';
+            refresh(sections, forceNewSectionTimestamp) {
+                let url = new URL(LOKI_BASE_URL + '/customer/section/load');
                 if (sections) {
-                    url += '?sections=' + sections;
+                    url.searchParams.append('sections', sections);
+                }
+
+                forceNewSectionTimestamp = !!forceNewSectionTimestamp;
+                if (forceNewSectionTimestamp) {
+                    url.searchParams.append('force_new_section_timestamp', 'true');
+                    url.searchParams.append('_', Math.floor(Date.now() / 1000));
                 }
 
                 fetch(url, {
@@ -54,7 +73,6 @@ use Magento\Framework\View\Element\Template;
                     .then(newData => {
                         if (typeof newData === 'object') {
                             this.data = Object.assign(this.data, newData);
-                            console.log('Fetching new data', newData);
                             this.save();
                         }
                     })
@@ -68,7 +86,8 @@ use Magento\Framework\View\Element\Template;
                     return this.data;
                 }
 
-                if (!this.data.hasOwnProperty(key) || !this.data[key] ) {
+                if (!this.data[key] ) {
+                    console.log('Refreshing data:', key, this.data[key]);
                     this.refresh(key);
                 }
 
@@ -79,8 +98,10 @@ use Magento\Framework\View\Element\Template;
                 this.save();
             },
             remove(key) {
-                delete this.data[key];
-                this.save();
+                if (key !== undefined) {
+                    delete this.data[key];
+                    this.save();
+                }
             },
             reset() {
                 this.data = {};

view/frontend/templates/script/store/message-store.phtml

@@ -14,7 +14,7 @@ use Magento\Framework\View\Element\Template;
                     const messageSection = Alpine.store('LokiLocalStorage').get('messages');
                     if (messageSection && messageSection.messages) {
                         this.messages = [...this.messages, ...messageSection.messages];
-                        this.getStore().set('messages', {messages: []});
+                        this.reset();
                     }
                 });
             },
@@ -51,16 +51,20 @@ use Magento\Framework\View\Element\Template;
                 this.addMessage('notice', text);
             },
             reset() {
-                this.getStore().remove('messages');
+                this.getStore().set('messages', {
+                    data_id: this.getStore().getNewSectionLifetime(),
+                    messages: []
+                });
             },
             getMessagesFromStore() {
                 const messagesSection = this.getStore().get('messages');
                 return messagesSection && messagesSection.messages ? messagesSection.messages : [];
             },
             setMessageInStore(messages) {
-                const messagesSection = this.getStore().get('messages');
-                messagesSection.messages = messages;
-                this.getStore().set('messages', messagesSection);
+                this.getStore().set('messages', {
+                    data_id: this.getStore().getNewSectionLifetime(),
+                    messages
+                });
             },
             getStore() {
                 return Alpine.store('LokiLocalStorage');