-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1003 from dev-launchers/judeamos/978-onboarding-m…
…odal-creation 978, Part 1, Creating onboarding modal component
- Loading branch information
Showing
11 changed files
with
142 additions
and
6 deletions.
There are no files selected for viewing
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
14 changes: 14 additions & 0 deletions
14
...website/src/components/modules/UserOnboardingModal/DiscordOnboarding/DiscordOnboarding.js
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,14 @@ | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
export default function DiscordOnboarding() { | ||
return(<></>); | ||
} |
1 change: 1 addition & 0 deletions
1
apps/website/src/components/modules/UserOnboardingModal/DiscordOnboarding/index.js
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 @@ | ||
export { default } from "./DiscordOnboarding"; |
10 changes: 10 additions & 0 deletions
10
...bsite/src/components/modules/UserOnboardingModal/PlatformOnboarding/PlatformOnboarding.js
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,10 @@ | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
export default function PlatformOnboarding() { | ||
return(<></>); | ||
} |
1 change: 1 addition & 0 deletions
1
apps/website/src/components/modules/UserOnboardingModal/PlatformOnboarding/index.js
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 @@ | ||
export { default } from "./PlatformOnboarding"; |
36 changes: 36 additions & 0 deletions
36
apps/website/src/components/modules/UserOnboardingModal/StyledUserOnboardingModal.js
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,36 @@ | ||
import styled from "styled-components"; | ||
|
||
export const ModalContainer = styled.div` | ||
width: 100%; | ||
height: 100%; | ||
font-family: "Abel", sans-serif; | ||
`; | ||
|
||
export const ModalHeader = styled.div` | ||
width: 100%; | ||
${'' /* Enter styling */} | ||
`; | ||
|
||
export const ModalBody = styled.div` | ||
padding: 0 120px; | ||
${'' /* Enter styling */} | ||
`; | ||
|
||
// Modal set up | ||
export const userUnboardingModalStyle = { | ||
content: { | ||
position: "absolute", | ||
width: "50%", | ||
padding: "0px", | ||
height: "80%", | ||
top: "50%", | ||
left: "50%", | ||
overflow: "hidden", | ||
right: "auto", | ||
bottom: "auto", | ||
marginRight: "-50%", | ||
transform: "translate(-50%, -50%)", | ||
zIndex: 1001 | ||
}, | ||
overlay: { zIndex: 1000, backgroundColor: "rgba(0,0,0,.75)" } | ||
}; |
4 changes: 4 additions & 0 deletions
4
...e/src/components/modules/UserOnboardingModal/ThirdPartyOnboarding/ThirdPartyOnboarding.js
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,4 @@ | ||
|
||
export default function ThirdPartyOnboarding() { | ||
return(<></>); | ||
} |
1 change: 1 addition & 0 deletions
1
apps/website/src/components/modules/UserOnboardingModal/ThirdPartyOnboarding/index.js
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 @@ | ||
export { default } from "./ThirdPartyOnboarding"; |
46 changes: 46 additions & 0 deletions
46
apps/website/src/components/modules/UserOnboardingModal/UserOnboardingModal.js
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,46 @@ | ||
import {useState, useEffect} from "react"; | ||
import Modal from "react-modal"; | ||
|
||
import PlatformOnboarding from "./PlatformOnboarding/PlatformOnboarding"; | ||
import Typography from "@devlaunchers/components/components/atoms/Typography"; | ||
import { ModalContainer, userUnboardingModalStyle, ModalHeader, ModalBody } from "./StyledUserOnboardingModal"; | ||
|
||
Modal.setAppElement("#__next"); | ||
|
||
/** | ||
* @description This is custom modal for the user onboarding. | ||
*/ | ||
export default function UserOnboardingModal({isOpen}) { | ||
const [modalIsOpen, setModalIsOpen] = useState(true); | ||
|
||
const openModal = () => { | ||
setModalIsOpen(true); | ||
} | ||
// const afterOpenModal = () => { | ||
// // references are now sync'd and can be accessed. | ||
// } | ||
const closeModal = () => { | ||
setModalIsOpen(false); | ||
} | ||
return ( | ||
<> | ||
{/* "modalIsOpen ? true : false" set this way until we start adding typescript for | ||
boolean type */} | ||
<Modal | ||
isOpen={modalIsOpen ? true : false} | ||
onRequestOpen={openModal} | ||
onRequestClose={closeModal} | ||
style={userUnboardingModalStyle} | ||
contentLabel="User Onboarding" | ||
> | ||
<ModalContainer> | ||
<ModalHeader><Typography type="h4"> Modal Title</Typography></ModalHeader> | ||
<ModalBody> | ||
<Typography type="p"> body</Typography> | ||
{/* Onboarding Card Component */} | ||
</ModalBody> | ||
</ModalContainer> | ||
</Modal> | ||
</> | ||
); | ||
} |
1 change: 1 addition & 0 deletions
1
apps/website/src/components/modules/UserOnboardingModal/index.js
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 @@ | ||
export { default } from "./UserOnboardingModal"; |
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 |
---|---|---|
@@ -1,13 +1,35 @@ | ||
import React from "react"; | ||
|
||
import Header from "../../components/common/Header"; | ||
import { useUserDataContext } from '../../context/UserDataContext'; | ||
|
||
import Head from 'next/head'; | ||
import UserProfile from "../../components/modules/UserProfile"; | ||
import Footer from "../../components/common/Footer"; | ||
import UserOnboardingModal from "../../components/modules/UserOnboardingModal" | ||
|
||
/** | ||
* @drescription This component renders the User Profile Component. | ||
* A Modal is opened when user has not fully completed their onboarding. | ||
*/ | ||
export default function UserProfilePage() { | ||
const { userData } = useUserDataContext(); | ||
|
||
/** | ||
* @description Open modal when user has no username. | ||
* More conditions will be applied when modal should be opened in the future. | ||
*/ | ||
const openUserOnboardingModal = () => { | ||
return !(userData && userData.username) | ||
} | ||
|
||
return ( | ||
<div> | ||
<UserProfile /> | ||
</div> | ||
<> | ||
<Head> | ||
<title>User Profile</title> | ||
</Head> | ||
<div> | ||
{openUserOnboardingModal() && <UserOnboardingModal/>} | ||
<UserProfile /> | ||
</div> | ||
</> | ||
); | ||
} |