feat(landing): Add new features pop up to alert users for recent releases. BM-1064

packages/landing/package.json

@@ -33,15 +33,17 @@
     "@basemaps/geo": "^7.11.0",
     "@basemaps/infra": "^7.11.0",
     "@basemaps/shared": "^7.11.0",
-    "@linzjs/lui": "^21.12.1",
+    "@linzjs/lui": "^21.46.0",
     "@servie/events": "^3.0.0",
     "@types/proj4": "^2.5.2",
     "@types/react-dom": "^18.0.6",
+    "@types/react-modal": "^3.16.3",
     "maplibre-gl": "^4.5.0",
     "mime-types": "^2.1.35",
     "proj4": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "ulid": "^2.3.0"
   },
   "publishConfig": {
@@ -60,6 +62,14 @@
       "entry": "../../node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg",
       "outfile": "dist/assets/logo-linz.svg"
     },
+    {
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/whats_new_updates.svg",
+      "outfile": "dist/assets/whats_new_updates.svg"
+    },
+    {
+      "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/clear.svg",
+      "outfile": "dist/assets/clear.svg"
+    },
     {
       "entry": "../../node_modules/@linzjs/lui/dist/assets/fonts",
       "outfile": "dist/assets/fonts"

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

@@ -0,0 +1,140 @@
+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']>;
+}
+
+type FeatureUpdatesProps = {
+  header: string;
+  wrapperClass?: string;
+  id: string;
+  releaseVersion: string;
+  enabled: boolean;
+  children?: ReactNode;
+} & (
+  | { bigImage: string; smallImage: string; iframe?: never }
+  | { bigImage?: never; smallImage?: never; iframe: IFrameConfig }
+);
+
+type FeatureUpdatesState = {
+  showModal: boolean;
+};
+
+/**
+ * FeatureUpdates is a re-implementation of @linzjs/lui -> LuiUpdatesSplashModal module,
+ * This use to enable a one off pop up screen for introduce new feature of the recent release.
+ *
+ */
+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,
+    };
+  }
+
+  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 { showModal } = this.state;
+
+    if (!showModal) return null;
+
+    return (
+      <ReactModal
+        isOpen={showModal}
+        shouldCloseOnEsc={true}
+        onRequestClose={this.handleClose}
+        shouldCloseOnOverlayClick={true}
+        contentLabel="Recent updates"
+        className="lui-splash-content lui-box-shadow"
+        overlayClassName="splash_overlay"
+      >
+        <div className={clsx('lui-large-feature-notification', wrapperClass)}>
+          <div className="lui-feature-header">
+            <div className="lui-feature-title-wrapper">
+              {this.WhatsNewIcon()}
+              <h1>{header}</h1>
+            </div>
+            <button aria-label="Close dialog" onClick={this.handleClose}>
+              {this.ClearIcon()}
+            </button>
+          </div>
+          {this.renderFeatureMedia()}
+          <div className="lui-feature-text">{children}</div>
+        </div>
+      </ReactModal>
+    );
+  }
+
+  FeatureImages(bigImage: string, smallImage: string): ReactNode {
+    return (
+      <div className="lui-feature-img">
+        <img className="lui-hide-xs lui-hide-sm" alt={"What's new"} src={bigImage} />
+        <img className="lui-hide-md lui-hide-lg lui-hide-xl" alt={"What's new"} src={smallImage} />
+      </div>
+    );
+  }
+
+  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 (
+      <span
+        className={'LuiIcon LuiIcon--md lui-feature-title-icon '}
+        data-icon={'ic_whats_new_updates'}
+        aria-label={'whats_new_icon'}
+      >
+        <img src="assets/whats_new_updates.svg" alt="whats_new_icon" className="LuiIcon__image" />
+      </span>
+    );
+  }
+
+  // @linzjs/lui cross_icon re-implementation
+  ClearIcon(): ReactNode {
+    return (
+      <span className="LuiIcon LuiIcon--md LuiIcon--interactive" data-icon="ic_clear" aria-label="cross_icon">
+        <img src="/assets/clear.svg" alt="cross_icon" />
+      </span>
+    );
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Component, ReactNode } from 'react';
+
+import { Config } from '../config.js';
+import { WindowUrl } from '../url.js';
+import { FeatureUpdates } from './feature.updates.js';
+
+const baseUrl = WindowUrl.baseUrl();
+
+/**
+ * Please updated the following settings and descriptions for new features pop up
+ */
+const bigImage = new URL('assets/Lg+3D+Maps+splash.gif', baseUrl).href; // Large gif file location
+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 recentUpdates = {
+  children: (
+    <>
+      <h5 className="RecentUpdatesHeading">Basemaps are now viewable in 3D!</h5>
+      <p>
+        To activate this function, click the mountains icon on the left-hand side then hold right-click to change your
+        viewpoint.
+      </p>
+      <p>The new Labels button can also be toggled to show places names.</p>
+    </>
+  ),
+  bigImage,
+  smallImage,
+};
+
+export class NewFeature extends Component {
+  enabled = new Date() <= closingDate;
+
+  override render(): ReactNode {
+    return (
+      <FeatureUpdates
+        id={dismissedKey}
+        header="What's new"
+        releaseVersion={Config.Version}
+        bigImage={recentUpdates.bigImage}
+        smallImage={recentUpdates.smallImage}
+        enabled={this.enabled}
+      >
+        {recentUpdates.children}
+      </FeatureUpdates>
+    );
+  }
+}

packages/landing/src/index.tsx

@@ -4,6 +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 { Config } from './config.js';
 import { WindowUrl } from './url.js';
 import { isWebpSupported } from './webp.js';
@@ -13,6 +14,7 @@ class Page extends Component {
     return (
       <Fragment>
         <Header />
+        <NewFeature />
         <Basemaps />
         <Footer />
       </Fragment>

packages/landing/static/index.css

@@ -257,4 +257,8 @@ have higher specifity than the default styles of the react-select component
 
 .display-none {
   display: none!important;
+}
+
+.lui-feature-img img {
+  padding: 20px;
 }