WIP

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": {

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

@@ -0,0 +1,110 @@
+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;
+};
+
+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 <FeatureIFrame iframeConfig={iframe} />;
+    }
+    if (bigImage && smallImage) {
+      return <FeatureImages bigImage={bigImage} smallImage={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">
+              {/* <Icon alt="whats_new_icon" name="ic_whats_new_updates" size="lg" className="lui-feature-title-icon" /> */}
+              <h1>{header}</h1>
+            </div>
+            <button aria-label="Close dialog" onClick={this.handleClose}>
+              {/* <Icon alt="cross_icon" name="ic_clear" status="interactive" size="md" /> */}
+            </button>
+          </div>
+          {this.renderFeatureMedia()}
+          <div className="lui-feature-text">{children}</div>
+        </div>
+      </ReactModal>
+    );
+  }
+}
+
+const FeatureImages = ({ bigImage, smallImage }: { bigImage: string; smallImage: string }): ReactNode => (
+  <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>
+);
+
+const FeatureIFrame = ({ iframeConfig }: { 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>
+  );
+};

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

@@ -0,0 +1,48 @@
+import { FeatureUpdates } from '../feature.updates.js';
+
+// Make sure you turn off the toggle before making any changes... someone who has not dismissed it might log in...
+const bigImage = 'https://dev.basemaps.linz.govt.nz/assets/Lg+3D+Maps+splash.gif';
+const smallImage = 'https://dev.basemaps.linz.govt.nz/assets/Lg+3D+Maps+splash.gif';
+const link = 'https://www.linz.govt.nz/products-services/data/linz-basemaps';
+
+const recentUpdates = {
+  children: (
+    <>
+      <h5 className="RecentUpdatesHeading">LINZ Basemaps 3D map is available now!</h5>
+      <p>You can now view 3d Basemaps now.</p>
+      <p>
+        For more information see&nbsp;
+        <a href={link} target="_blank" rel="noreferrer">
+          What&apos;s new in Basemaps
+        </a>
+      </p>
+    </>
+  ),
+  bigImage,
+  smallImage,
+};
+
+export const dismissedKey = `Basemaps_Recent_Updates_Dismissed`;
+export const releaseVersion = 'V7';
+/*
+  *****************   PLEASE READ BEFORE CHANGING!!!  *****************
+  Make sure you delete lines 55 to 58 and uncomment line 54 before merging your changes.
+  Those lines were only added for OCTN release.
+ */
+export const NewFeature = (): JSX.Element => {
+  const resentUpdatesModalEnabled = true;
+  return (
+    <>
+      <FeatureUpdates
+        id={dismissedKey}
+        header="What's new"
+        bigImage={recentUpdates.bigImage}
+        smallImage={recentUpdates.smallImage}
+        enabled={resentUpdatesModalEnabled}
+        releaseVersion={releaseVersion}
+      >
+        {recentUpdates.children}
+      </FeatureUpdates>
+    </>
+  );
+};

packages/landing/src/index.tsx

@@ -1,6 +1,7 @@
 import { Component, Fragment, ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { NewFeature } from './components/features/new.feature.js';
 import { Footer } from './components/layout.footer.js';
 import { Header } from './components/layout.header.js';
 import { Basemaps } from './components/map.js';
@@ -13,6 +14,7 @@ class Page extends Component {
     return (
       <Fragment>
         <Header />
+        <NewFeature />
         <Basemaps />
         <Footer />
       </Fragment>