Save the user's XEP-0421 occupant ID on the ChatRoom

src/headless/plugins/muc/muc.js

@@ -1726,8 +1726,17 @@ const ChatRoomMixin = {
             'resource': Strophe.getResourceFromJid(jid) || occupant?.attributes?.resource
         }
 
-        if (data.is_me && data.states.includes(converse.MUC_NICK_CHANGED_CODE)) {
-            this.save('nick', data.nick);
+        if (data.is_me) {
+            let modified = false;
+            if (data.states.includes(converse.MUC_NICK_CHANGED_CODE)) {
+                modified = true;
+                this.set('nick', data.nick);
+            }
+            if (this.features.get(Strophe.NS.OCCUPANTID) && this.get('occupant-id') !== data.occupant_id) {
+                modified = true;
+                this.set('occupant_id', data.occupant_id);
+            }
+            modified && this.save();
         }
 
         if (occupant) {

src/headless/plugins/muc/tests/occupants.js

@@ -33,6 +33,10 @@ describe("A MUC occupant", function () {
         const features = [...mock.default_muc_features, Strophe.NS.OCCUPANTID];
         const model = await mock.openAndEnterChatRoom(_converse, muc_jid, nick, features);
 
+        expect(model.occupants.length).toBe(1);
+        expect(model.get('occupant_id')).not.toBeFalsy();
+        expect(model.get('occupant_id')).toBe(model.occupants.at(0).get('occupant_id'));
+
         for (let i=0; i<mock.chatroom_names.length; i++) {
             // See example 21 https://xmpp.org/extensions/xep-0045.html#enter-pres
             const id = u.getUniqueId();
@@ -58,6 +62,11 @@ describe("A MUC occupant", function () {
         const nick = 'romeo';
         const features = [...mock.default_muc_features, Strophe.NS.OCCUPANTID];
         const model = await mock.openAndEnterChatRoom(_converse, muc_jid, nick, features);
+
+        expect(model.occupants.length).toBe(1);
+        expect(model.get('occupant_id')).not.toBeFalsy();
+        expect(model.get('occupant_id')).toBe(model.occupants.at(0).get('occupant_id'));
+
         const occupant_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
 
         const stanza = u.toStanza(`

src/shared/tests/mock.js

@@ -283,9 +283,10 @@ async function returnMemberLists (_converse, muc_jid, members=[], affiliations=[
     return new Promise(resolve => _converse.api.listen.on('membersFetched', resolve));
 }
 
-async function receiveOwnMUCPresence (_converse, muc_jid, nick, affiliation='owner', role='moderator') {
+async function receiveOwnMUCPresence (_converse, muc_jid, nick, affiliation='owner', role='moderator', features=[]) {
     const sent_stanzas = _converse.connection.sent_stanzas;
     await u.waitUntil(() => sent_stanzas.filter(iq => sizzle('presence history', iq).length).pop());
+
     const presence = $pres({
             to: _converse.connection.jid,
             from: `${muc_jid}/${nick}`,
@@ -294,13 +295,16 @@ async function receiveOwnMUCPresence (_converse, muc_jid, nick, affiliation='own
         .c('item').attrs({ affiliation, role, 'jid': _converse.bare_jid }).up()
         .c('status').attrs({code:'110'}).up().up()
 
+    if (features.includes(Strophe.NS.OCCUPANTID)) {
+        presence.c('occupant-id', {'xmlns': Strophe.NS.OCCUPANTID, 'id': u.getUniqueId() });
+    }
+
     if (_converse.xmppstatus.get('status')) {
        presence.c('show').t(_converse.xmppstatus.get('status'));
     }
     _converse.connection._dataRecv(createRequest(presence));
 }
 
-
 async function openAndEnterChatRoom (
         _converse,
         muc_jid,
@@ -320,7 +324,7 @@ async function openAndEnterChatRoom (
     // The user has just entered the room (because join was called)
     // and receives their own presence from the server.
     // See example 24: https://xmpp.org/extensions/xep-0045.html#enter-pres
-    await receiveOwnMUCPresence(_converse, muc_jid, nick, own_affiliation, own_role);
+    await receiveOwnMUCPresence(_converse, muc_jid, nick, own_affiliation, own_role, features);
 
     await room_creation_promise;
     const model = _converse.chatboxes.get(muc_jid);