slate/components/core/OnboardingModal.js
2020-12-08 20:22:17 -08:00

200 lines
5.3 KiB
JavaScript

import * as React from "react";
import * as Constants from "~/common/constants";
import * as Actions from "~/common/actions";
import * as Events from "~/common/custom-events";
import { css } from "@emotion/react";
import { ButtonPrimary } from "~/components/system/components/Buttons";
const STYLES_MODAL = css`
text-align: center;
padding-bottom: 64px;
box-sizing: border-box;
max-width: 680px;
width: 95vw;
min-height: 630px;
border-radius: 4px;
background-color: ${Constants.system.white};
overflow: hidden;
box-shadow: 0 0 60px 8px rgba(0, 0, 0, 0.03);
`;
const STYLES_BUTTON_SECONDARY = {
backgroundColor: Constants.system.white,
boxShadow: `0 0 0 1px ${Constants.system.brand} inset`,
color: Constants.system.brand,
marginRight: 16,
width: 160,
textDecoration: `none`,
};
const STYLES_IMAGE = css`
width: 100%;
background-color: ${Constants.system.black};
`;
const STYLES_TITLE = css`
font-family: ${Constants.font.semiBold};
font-size: 32px;
padding-top: 40px;
margin-bottom: 16px;
`;
const STYLES_TEXT = css`
font-family: ${Constants.font.text};
font-size: 18px;
margin-bottom: 24px;
padding: 0 64px;
`;
const STYLES_LINK = css`
text-decoration: none;
color: ${Constants.system.white};
:visited {
color: ${Constants.system.white};
}
`;
export const announcements = ["New On Slate: Grid System 2.0"];
export class OnboardingModal extends React.Component {
state = {
step: 0,
slides: [],
};
componentDidMount = () => {
Actions.updateStatus({ onboarding: this.props.unseenAnnouncements });
let slides = [];
if (this.props.newAccount) {
slides = this.onboardingCopy;
}
for (let feature of this.announcements) {
if (this.props.unseenAnnouncements.includes(feature.title)) {
slides.push(feature);
}
}
if (!slides.length) {
Events.dispatchCustomEvent({
name: "delete-modal",
detail: {},
});
}
this.setState({ slides });
};
announcements = [
{
title: "New On Slate: Grid System 2.0",
text:
"We just introduced a completely new layout engine that gives you total control over the way you can organize and display your slates.",
image: (
<img
src="https://slate.textile.io/ipfs/bafybeigb7pd2dh64ty7l2yhnzu5kjupgxbfzqzjjb2gtprexfxzkwx4nle"
alt="grid layout"
css={STYLES_IMAGE}
/>
),
button: (
<ButtonPrimary style={{ width: 160 }} onClick={() => this._handleClick(1)}>
Try it out
</ButtonPrimary>
),
},
];
onboardingCopy = [
{
title: "Welcome to Slate",
text:
"Slate is distributed file-sharing network designed for private and public storage. Drag and drop your files into the app to easily start uploading your books, images, and documents.",
image: (
<img
src="https://slate.textile.io/ipfs/bafybeih4yqlefcbvuuhuyddg5vyfcm7latyifexzynmnbep4dx5hapbbjq"
alt=""
css={STYLES_IMAGE}
/>
),
button: (
<ButtonPrimary style={{ width: 160 }} onClick={() => this._handleClick(1)}>
Got it
</ButtonPrimary>
),
},
{
title: "Upload from Anywhere",
text:
"Use the Slate Chrome extension to upload images and screenshots to your account from anywhere on the web.",
image: (
<img
src="https://slate.textile.io/ipfs/bafybeifchvk6cxi4yl3twlontxlpkff623pcz2lhukrlzwor5rioviqsea"
alt=""
css={STYLES_IMAGE}
/>
),
button: (
<React.Fragment>
<a
href="https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc"
target="_blank"
style={{ textDecoration: `none` }}
>
<ButtonPrimary style={STYLES_BUTTON_SECONDARY}>Get extension</ButtonPrimary>
</a>
<ButtonPrimary style={{ width: 160 }} onClick={() => this._handleClick(1)}>
Next
</ButtonPrimary>
</React.Fragment>
),
},
{
title: "Organize and share",
text:
"Organize your files into slates to organize research, create mood boards, and collect your thoughts to share with other people.",
image: (
<img
src="https://slate.textile.io/ipfs/bafybeiaiy3c72sdirjj24vvev7xpuvvqckwip3ot7l4u4iaxdlnbp4hqae"
alt=""
css={STYLES_IMAGE}
/>
),
button: (
<ButtonPrimary style={{ width: 160 }} onClick={() => this._handleClick(1)}>
Start using Slate
</ButtonPrimary>
),
},
];
_handleClick = (i) => {
if (this.state.step + i >= this.state.slides.length) {
Events.dispatchCustomEvent({
name: "delete-modal",
detail: {},
});
} else {
this.setState({ step: this.state.step + i });
}
};
render() {
if (!this.state.slides || !this.state.slides.length) {
return null;
}
return (
<div>
<div css={STYLES_MODAL}>
<div>
{this.state.slides[this.state.step].image}
<div css={STYLES_TITLE}>{this.state.slides[this.state.step].title}</div>
<div css={STYLES_TEXT}>{this.state.slides[this.state.step].text}</div>
{this.state.slides[this.state.step].button}
</div>
</div>
</div>
);
}
}