Remove iframe and add logics to check release versions.

packages/landing/src/components/feature.updates.tsx

@@ -2,26 +2,17 @@ import { clsx } from 'clsx';
 import { Component, ReactNode } from 'react';
 import ReactModal from 'react-modal';
 
-interface IFrameConfig {
-  url: string;
-  width: number;
-  height: number;
-  title: string;
-  iframeWrapperClass?: string;
-  iFrameProps?: Partial<JSX.IntrinsicElements['iframe']>;
-}
+import { Config } from '../config.js';
 
 type FeatureUpdatesProps = {
   header: string;
   wrapperClass?: string;
   id: string;
   releaseVersion: string;
+  closingDate: Date;
   enabled: boolean;
   children?: ReactNode;
-} & (
-  | { bigImage: string; smallImage: string; iframe?: never }
-  | { bigImage?: never; smallImage?: never; iframe: IFrameConfig }
-);
+} & { bigImage: string; smallImage: string; iframe?: never };
 
 type FeatureUpdatesState = {
   showModal: boolean;
@@ -35,34 +26,39 @@ type FeatureUpdatesState = {
 export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdatesState> {
   constructor(props: FeatureUpdatesProps) {
     super(props);
-    const currentVersion = window.localStorage.getItem(this.props.id);
 
     this.state = {
-      showModal: this.props.enabled && this.props.releaseVersion.trim() !== currentVersion,
+      showModal: this.showModal(),
     };
   }
 
+  showModal(): boolean {
+    if (!this.props.enabled) return false;
+    // Disable after closing date
+    if (this.props.closingDate < new Date()) return false;
+    // Disable if dismissed
+    const id = window.localStorage.getItem(this.props.id);
+    const releaseVersion = this.props.releaseVersion.trim();
+    if (releaseVersion === id) return false;
+    // Disable if not same release version
+    const currentVersion = Config.Version.trim();
+    if (Config.Version === '' || currentVersion.length <= releaseVersion.length) return false;
+    const versionMatch = currentVersion.slice(0, releaseVersion.length);
+    if (versionMatch !== releaseVersion) return false;
+    return true;
+  }
+
   handleClose = (): void => {
     this.setState({ showModal: false });
     window.localStorage.setItem(this.props.id, this.props.releaseVersion);
   };
 
-  renderFeatureMedia(): ReactNode {
-    const { bigImage, smallImage, iframe } = this.props;
-    if (iframe) {
-      return this.FeatureIFrame(iframe);
-    }
-    if (bigImage && smallImage) {
-      return this.FeatureImages(bigImage, smallImage);
-    }
-    return null; // Return null if no media is available
-  }
-
   override render(): ReactNode {
-    const { header, wrapperClass, children } = this.props;
+    const { header, wrapperClass, children, bigImage, smallImage } = this.props;
     const { showModal } = this.state;
 
     if (!showModal) return null;
+    if (Config.map.isDebug) return;
 
     return (
       <ReactModal
@@ -84,7 +80,7 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
               {this.ClearIcon()}
             </button>
           </div>
-          {this.renderFeatureMedia()}
+          {this.FeatureImages(bigImage, smallImage)}
           <div className="lui-feature-text">{children}</div>
         </div>
       </ReactModal>
@@ -100,22 +96,6 @@ export class FeatureUpdates extends Component<FeatureUpdatesProps, FeatureUpdate
     );
   }
 
-  FeatureIFrame(iframeConfig: IFrameConfig): ReactNode {
-    const wrapperClass = iframeConfig.iframeWrapperClass || 'iframe-wrapper';
-    const iFrameProps = iframeConfig.iFrameProps || {};
-    return (
-      <div className={wrapperClass}>
-        <iframe
-          width={iframeConfig.width}
-          height={iframeConfig.height}
-          src={iframeConfig.url}
-          title={iframeConfig.title}
-          {...iFrameProps}
-        ></iframe>
-      </div>
-    );
-  }
-
   // @linzjs/lui whats_new_icon re-implementation
   WhatsNewIcon(): ReactNode {
     return (

packages/landing/src/components/new.feature.tsx → packages/landing/src/components/new-features/3d.map.tsx

@@ -1,8 +1,7 @@
 import { Component, ReactNode } from 'react';
 
-import { Config } from '../config.js';
-import { WindowUrl } from '../url.js';
-import { FeatureUpdates } from './feature.updates.js';
+import { WindowUrl } from '../../url.js';
+import { FeatureUpdates } from '../feature.updates.js';
 
 const baseUrl = WindowUrl.baseUrl();
 
@@ -13,6 +12,7 @@ const bigImage = new URL('assets/Lg+3D+Maps+splash.gif', baseUrl).href; // Large
 const smallImage = new URL('assets/Sml+3D+map+splash.gif', baseUrl).href; // Small gif file location
 const closingDate = new Date('2024-10-30'); // End date for pop up screen
 const dismissedKey = `DISMISSED_MODALS_LINZ_Basemaps_3D_Map`; // Optional to set as Config.Version to disable Modal as default
+const releaseVersion = 'v7'; // Feature released version can both been major version or minor version
 const recentUpdates = {
   children: (
     <>
@@ -29,14 +29,15 @@ const recentUpdates = {
 };
 
 export class NewFeature extends Component {
-  enabled = new Date() <= closingDate;
+  enabled = true;
 
   override render(): ReactNode {
     return (
       <FeatureUpdates
         id={dismissedKey}
         header="What's new"
-        releaseVersion={Config.Version}
+        releaseVersion={releaseVersion}
+        closingDate={closingDate}
         bigImage={recentUpdates.bigImage}
         smallImage={recentUpdates.smallImage}
         enabled={this.enabled}

packages/landing/src/index.tsx

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
 import { Footer } from './components/layout.footer.js';
 import { Header } from './components/layout.header.js';
 import { Basemaps } from './components/map.js';
-import { NewFeature } from './components/new.feature.js';
+import { NewFeature } from './components/new-features/3d.map.js';
 import { Config } from './config.js';
 import { WindowUrl } from './url.js';
 import { isWebpSupported } from './webp.js';