@oasisomniverse/nextjs 1.0.0

package/src/components/popups/map/components/SearchMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class SearchMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'searchMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'searchMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchMap;

package/src/components/popups/map/components/ViewGlobal3dMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewGlobal3dMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'viewGlobal3dMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Our World Coming Soon.</h2>
+                        <p>This is functionaliy that is built in the Unity Smartphone Prototype for Our World and will soon be released. You can then download Our World from either the Map or OAPP menu.</p>
+                        <button onClick={() => hide('map', 'viewGlobal3dMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewGlobal3dMap;

package/src/components/popups/map/components/ViewHalonsOnMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewHalonsOnMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'viewHalonsOnMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'viewHalonsOnMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewHalonsOnMap;

package/src/components/popups/map/components/ViewOappOnMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewOappOnMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'viewOappOnMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'viewOappOnMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewOappOnMap;

package/src/components/popups/map/components/ViewQuestOnMap.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewQuestOnMap extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('map', 'viewQuestOnMap')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('map', 'viewQuestOnMap')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewQuestOnMap;

package/src/components/popups/map/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+import React from 'react';
+import Add2dObjectMap from './components/Add2dObjectMap';
+import Add3dObjectMap from './components/Add3dObjectMap';
+import AddQuestToMap from './components/AddQuestToMap';
+import DownloadOurWorld from './components/DownloadOurWorld';
+import ManageMap from './components/ManageMap';
+import SearchMap from './components/SearchMap';
+import PlotRouteOnMap from './components/PlotRouteOnMap';
+import ViewGlobal3dMap from './components/ViewGlobal3dMap';
+import ViewHalonsOnMap from './components/ViewHalonsOnMap';
+import ViewOappOnMap from './components/ViewOappOnMap';
+import ViewQuestOnMap from './components/ViewQuestOnMap';
+
+class Map extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <Add2dObjectMap
+                    show={props.map.add2dObjectMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <Add3dObjectMap
+                    show={props.map.add3dObjectMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <AddQuestToMap
+                    show={props.map.addQuestToMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <DownloadOurWorld
+                    show={props.map.downloadOurWorld}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageMap
+                    show={props.map.manageMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <PlotRouteOnMap
+                    show={props.map.plotRouteOnMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchMap
+                    show={props.map.searchMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewGlobal3dMap
+                    show={props.map.viewGlobal3dMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewHalonsOnMap
+                    show={props.map.viewHalonsOnMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewOappOnMap
+                    show={props.map.viewOappOnMap}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ViewQuestOnMap
+                    show={props.map.viewQuestOnMap}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Map;

package/src/components/popups/messages/Message.tsx

@@ -0,0 +1,87 @@
+'use client';
+import React from "react";
+// import { Link } from "react-router-dom";
+import { Modal } from "react-bootstrap";
+
+import MessageContacts from "../../common/message/MessageContacts";
+import Messages from "../../common/message/Messages";
+import "../../../assets/scss/popup.scss";
+import "../../../assets/scss/message.scss";
+import avatar from "../../../assets/images/loggedin.png"
+
+class Message extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            contactList: [
+                {
+                    name: 'Test 123',
+                    img: avatar,
+                    date: '13th October 2021',
+                    lastMessage: 'Test 123',
+                    active: true
+                },
+                {
+                    name: 'Test 123',
+                    img: avatar,
+                    date: '13th October 2021',
+                    lastMessage: 'Test 123',
+                    active: false
+                }
+            ],
+            messageList: [
+                {
+                    from: 'Admin',
+                    img: avatar,
+                    date: '10th October',
+                    message: 'Hey what are you doing?'
+                },
+                {
+                    from: 'me',
+                    date: '10th October',
+                    message: 'Making chating work on React'
+                },
+                {
+                    from: 'Admin',
+                    img: avatar,
+                    date: 'Yesterday',
+                    message: 'OK Good luck'
+                },
+                {
+                    from: 'me',
+                    date: '8:00 am',
+                    message: 'Thank you'
+                },
+            ]
+        }
+    }
+
+    render() {
+        return (
+            <Modal
+                size="xl"
+                show={true}
+                dialogClassName=""
+                onHide={() => this.props.history.push("/")}
+            >
+                <Modal.Header closeButton>
+                    <Modal.Title>Messages</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <div class="container">
+                        <div class="messaging">
+                            <div class="inbox_msg">
+                                <MessageContacts 
+                                    contactList={this.state.contactList}
+                                />
+                                <Messages messageList={this.state.messageList}/>
+                            </div>
+                        </div>
+                    </div>
+                </Modal.Body>
+            </Modal>
+        );
+    }
+}
+
+export default Message;

package/src/components/popups/mission/components/ManageMission.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ManageMission extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('mission', 'manageMission')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('mission', 'manageMission')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ManageMission;

package/src/components/popups/mission/components/SearchMission.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class SearchMission extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('mission', 'searchMission')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('mission', 'searchMission')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default SearchMission;

package/src/components/popups/mission/components/ViewMission.tsx

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { Modal } from "react-bootstrap";
+import '../../../../assets/scss/coming-soon.scss';
+import InfoIcon from '../../../../assets/images/icon-info.svg'
+
+class ViewMission extends React.Component {
+    state = {  } 
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal
+                    size="sm"
+                    show={show}
+                    dialogClassName=""
+                    onHide={() => hide('mission', 'viewMission')}
+                >
+                    <Modal.Body className="text-center coming-soon">
+                        <img
+                            src={InfoIcon}
+                            alt="icon"
+                        />
+                        <h2>Coming Soon</h2>
+                        <p>This module is coming soon...</p>
+                        <button onClick={() => hide('mission', 'viewMission')}>OK</button>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ViewMission;

package/src/components/popups/mission/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+import React from 'react';
+
+import ManageMission from './components/ManageMission';
+import SearchMission from './components/SearchMission';
+import ViewMission from './components/ViewMission';
+
+class Mission extends React.Component {
+
+    render() {
+        const props=this.props;
+        return(
+            <>
+                <ViewMission
+                    show={props.mission.viewMission}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <ManageMission
+                    show={props.mission.manageMission}
+                    hide={props.toggleScreenPopup}
+                />
+
+                <SearchMission
+                    show={props.mission.searchMission}
+                    hide={props.toggleScreenPopup}
+                />
+            </>
+        )
+    }
+}
+
+export default Mission;

package/src/components/popups/nft/ContactPopup.tsx

@@ -0,0 +1,147 @@
+'use client';
+import React from 'react';
+
+import { Modal } from 'react-bootstrap';
+
+import '../../../assets/scss/contact-popup.scss';
+
+import { AgGridReact } from 'ag-grid-react';
+
+var filterParams = {
+    comparator: function (filterLocalDateAtMidnight, cellValue) {
+        var dateAsString = cellValue;
+        if (dateAsString === null) return -1;
+        var dateParts = dateAsString.split('/');
+        var cellDate = new Date(
+            Number(dateParts[2]),
+            Number(dateParts[1]) - 1,
+            Number(dateParts[0])
+        );
+        if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
+            return 0;
+        }
+        if (cellDate < filterLocalDateAtMidnight) {
+            return -1;
+        }
+        if (cellDate > filterLocalDateAtMidnight) {
+            return 1;
+        }
+    },
+    browserDatePicker: true,
+};
+
+class ContactPopup extends React.Component {
+
+    state = {
+        columnDefs: [
+            { 
+                field: 'athlete'
+            },
+            {
+                field: 'age',
+                filter: 'agNumberColumnFilter',
+                maxWidth: 100,
+            },
+            { field: 'country' },
+            {
+                field: 'year',
+                maxWidth: 100,
+            },
+            {
+                field: 'date',
+                filter: 'agDateColumnFilter',
+                filterParams: filterParams,
+            },
+            { field: 'sport' },
+            {
+                field: 'gold',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'silver',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'bronze',
+                filter: 'agNumberColumnFilter',
+            },
+            {
+                field: 'total',
+                filter: false,
+            },
+        ],
+        defaultColDef: {
+            flex: 1,
+            minWidth: 150,
+            filter: true,
+            sortable: true,
+            floatingFilter: true,
+            resizable: true,
+        },
+        rowData: null,
+    };
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.gridColumnApi = params.columnApi;
+    
+        const updateData = (data) => {
+          this.setState({ rowData: data });
+        };
+    
+        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
+          .then((resp) => resp.json())
+          .then((data) => updateData(data));
+    };
+
+    
+    render() { 
+        const { show, hide } = this.props;
+
+        return (
+            <>
+                <Modal 
+                    centered 
+                    className="custom-modal custom-contact-modal custom-popup-component" 
+                    show={show} 
+                    onHide={() => hide('nft', 'contactPopup')}
+                >
+                    <Modal.Body>
+                        <span className="form-cross-icon" onClick={() => hide('nft', 'contactPopup')}>
+                            <i className="fa fa-times"></i>
+                        </span>
+
+                        <div className="popup-container contact-Popup default-popup">
+                            <div className="popup-content">
+                                <h1 className="single-heading">Contacts</h1>
+                                <div className="button-bar">
+                                    <button className="sm-button" >Friends</button>
+                                    <button className="sm-button">Family</button>
+                                    <button className="sm-button">Colleagues</button>
+                                    <button className="sm-button">My list 1</button>
+                                    <button className="sm-button">My list 2</button>    
+                                </div>   
+                            </div>
+                            
+                            <div className="ag-theme-alpine custom-ag-parent">
+                                <AgGridReact
+                                    columnDefs={this.state.columnDefs}
+                                    defaultColDef={this.state.defaultColDef}
+                                    onGridReady={this.onGridReady}
+                                    rowData={this.state.rowData}
+                                />
+                            </div>
+
+                            <div className="right-btn">
+                                <button className="sm-button" >Find Avatar</button>
+                                <button className="sm-button" >Create List</button>
+                            </div>
+                            
+                        </div>
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+ 
+export default ContactPopup;