TO MERGE : Contact page from Admin or Environment Variable (#1401)

* Contact page from Admin or Environment Variable

* Get contact page from admin by pusher

* Changes requested

* Modify contactPageStore management

* documentation environment variables

Co-authored-by: Gregoire Parant <g.parant@thecodingmachine.com>

.env.template

@@ -22,3 +22,6 @@ MAX_USERNAME_LENGTH=8
 OPID_CLIENT_ID=
 OPID_CLIENT_SECRET=
 OPID_CLIENT_ISSUER=
+
+# If you want to have a contact page in your menu, you MUST set CONTACT_URL to the URL of the page that you want
+CONTACT_URL=

front/src/Components/Menu/ContactSubMenu.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import {CONTACT_URL} from "../../Enum/EnvironmentVariable";
+    import {contactPageStore} from "../../Stores/MenuStore";
-
 </script>
 
-<iframe title="contact" src="{CONTACT_URL}"></iframe>
+<iframe title="contact" src="{$contactPageStore}" allow="clipboard-read; clipboard-write self {$contactPageStore}" allowfullscreen></iframe>
 
 <style lang="scss">
     iframe {

front/src/Connexion/Room.ts

@@ -1,5 +1,5 @@
 import Axios from "axios";
-import { PUSHER_URL } from "../Enum/EnvironmentVariable";
+import { CONTACT_URL, PUSHER_URL } from "../Enum/EnvironmentVariable";
 import type { CharacterTexture } from "./LocalUser";
 import { localUserStore } from "./LocalUserStore";
 
@@ -20,6 +20,7 @@ export class Room {
     private _textures: CharacterTexture[] | undefined;
     private instance: string | undefined;
     private readonly _search: URLSearchParams;
+    private _contactPage: string | undefined;
 
     private constructor(private roomUrl: URL) {
         this.id = roomUrl.pathname;
@@ -105,6 +106,7 @@ export class Room {
         this._textures = data.textures;
         this._authenticationMandatory = data.authenticationMandatory || false;
         this._iframeAuthentication = data.iframeAuthentication;
+        this._contactPage = data.contactPage || CONTACT_URL;
         return new MapDetail(data.mapUrl, data.textures);
     }
 
@@ -198,4 +200,8 @@ export class Room {
     get iframeAuthentication(): string | undefined {
         return this._iframeAuthentication;
     }
+
+    get contactPage(): string | undefined {
+        return this._contactPage;
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -96,6 +96,8 @@ import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
 import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
 import { analyticsClient } from "../../Administration/AnalyticsClient";
 import { get } from "svelte/store";
+import type { RadialMenuItem } from "../Components/RadialMenu";
+import { contactPageStore } from "../../Stores/MenuStore";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -431,6 +433,7 @@ export class GameScene extends DirtyScene {
         gameManager.gameSceneIsCreated(this);
         urlManager.pushRoomIdToUrl(this.room);
         analyticsClient.enteredRoom(this.room.id);
+        contactPageStore.set(this.room.contactPage);
 
         if (touchScreenManager.supportTouchScreen) {
             this.pinchManager = new PinchManager(this);

front/src/Stores/MenuStore.ts

@@ -74,13 +74,18 @@ function createSubMenusStore() {
 
 export const subMenusStore = createSubMenusStore();
 
+export const contactPageStore = writable<string | undefined>(CONTACT_URL);
+
 export function checkSubMenuToShow() {
-    if (!get(userIsAdminStore)) {
+    subMenusStore.removeMenu(SubMenusInterface.globalMessages);
-        subMenusStore.removeMenu(SubMenusInterface.globalMessages);
+    subMenusStore.removeMenu(SubMenusInterface.contact);
+
+    if (get(userIsAdminStore)) {
+        subMenusStore.addMenu(SubMenusInterface.globalMessages);
     }
 
-    if (CONTACT_URL === undefined) {
+    if (get(contactPageStore) !== undefined) {
-        subMenusStore.removeMenu(SubMenusInterface.contact);
+        subMenusStore.addMenu(SubMenusInterface.contact);
     }
 }
 

pusher/src/Controller/MapController.ts

@@ -62,6 +62,7 @@ export class MapController extends BaseController {
                         roomSlug: "", // Deprecated
                         tags: [],
                         textures: [],
+                        contactPage: undefined,
                     } as MapDetailsData)
                 );
 

pusher/src/Services/AdminApi/MapDetailsData.ts

@@ -15,6 +15,8 @@ export const isMapDetailsData = new tg.IsInterface()
         policy_type: isNumber, //isNumericEnum(GameRoomPolicyTypes),
         tags: tg.isArray(tg.isString),
         textures: tg.isArray(isCharacterTexture),
+        contactPage: tg.isUnion(tg.isString, tg.isUndefined),
     })
     .get();
+
 export type MapDetailsData = tg.GuardedType<typeof isMapDetailsData>;