-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(landing): Add new features pop up to alert users for recent rele…
…ases. BM-1064 (#3356) ### Motivation We want to alert Basemaps users about new features for recent release. To use the @linzjs/lui -> [LuiUpdatesSplashModal](https://github.com/linz/Lui/blob/master/src/components/LuiUpdateSplashModal/LuiUpdatesSplashModal.tsx) which is same with land online search. ### Modifications Initial investigations with @linzjs/lui that it's very hard to import and use react components from it because different tech stacks. - lui build and bundled with nodejs which contains dependencies like `crypto` or `stream` that is not support by browser. We might need to do polyfills to map them into browser friendly dependencies. - lui only bundle everything into one index.js, we don't have individual module file to do direct import, so we have to deal with dependency problem above. As a result, we decide to re-implement the `LuiUpdatesSplashModal` in basemaps just using the assets and css from @linzjs/lui - `FeatureUpdates` is a completely re-implementation of `LuiUpdatesSplashModal` - `NewFeature` is the component that we need to update often when describe new features. - Updated @linzjs/lui to latest ### Verification - Tested new pop up only show once after dismissed. - Tested new pop up stop showing after closing date. - Tested new pop up shows in incognito mode/clearing cache after dismissed.  
- Loading branch information
1 parent
5b207de
commit a61b652
Showing
6 changed files
with
188 additions
and
5 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import { clsx } from 'clsx'; | ||
| import { Component, ReactNode } from 'react'; | ||
| import ReactModal from 'react-modal'; | ||
|
|
||
| import { Config } from '../config.js'; | ||
|
|
||
| type FeatureUpdatesProps = { | ||
| header: string; | ||
| wrapperClass?: string; | ||
| id: string; | ||
| dismissedKey: string; | ||
| closingDate: Date; | ||
| enabled: boolean; | ||
| children?: ReactNode; | ||
| } & { bigImage: string; smallImage: string; iframe?: never }; | ||
|
|
||
| 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 id = window.localStorage.getItem(this.props.id); | ||
|
|
||
| this.state = { | ||
| showModal: this.props.enabled && this.props.dismissedKey !== id && this.props.closingDate >= new Date(), | ||
| }; | ||
| } | ||
|
|
||
| handleClose = (): void => { | ||
| this.setState({ showModal: false }); | ||
| window.localStorage.setItem(this.props.id, this.props.dismissedKey); | ||
| }; | ||
|
|
||
| override render(): ReactNode { | ||
| const { header, wrapperClass, children, bigImage, smallImage } = this.props; | ||
| const { showModal } = this.state; | ||
|
|
||
| if (!showModal) return null; | ||
| if (Config.map.isDebug) return; | ||
|
|
||
| return ( | ||
| <ReactModal | ||
| isOpen={showModal} | ||
| shouldCloseOnEsc={true} | ||
| onRequestClose={this.handleClose} | ||
| shouldCloseOnOverlayClick={true} | ||
| contentLabel="Recent updates" | ||
| className="lui-splash-content lui-box-shadow" | ||
| overlayClassName="splash_overlay" | ||
| appElement={document.getElementById('main') || undefined} | ||
| > | ||
| <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.FeatureImages(bigImage, smallImage)} | ||
| <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> | ||
| ); | ||
| } | ||
|
|
||
| // @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" /> | ||
| </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> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Component, ReactNode } from 'react'; | ||
|
|
||
| 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 id = `LINZ_Basemaps_3D_Map`; // Optional to set as Config.Version to disable Modal as default | ||
| const dismissedKey = 'DISMISSED_MODALS_2024_10_3d_map'; // Feature released version can both been major version or minor version | ||
| const recentUpdates = { | ||
| children: ( | ||
| <> | ||
| <h2>Basemaps are now viewable in 3D!</h2> | ||
| <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 = true; | ||
|
|
||
| override render(): ReactNode { | ||
| return ( | ||
| <FeatureUpdates | ||
| id={id} | ||
| header="What's new" | ||
| dismissedKey={dismissedKey} | ||
| closingDate={closingDate} | ||
| bigImage={recentUpdates.bigImage} | ||
| smallImage={recentUpdates.smallImage} | ||
| enabled={this.enabled} | ||
| > | ||
| {recentUpdates.children} | ||
| </FeatureUpdates> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters