123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
import { h, Component } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { FocusTrap } from '../shared/components/focusTrap';
|
|
import { EmailPreferencesForm } from './components/EmailPreferencesForm';
|
|
import { FollowTags } from './components/FollowTags';
|
|
import { FollowUsers } from './components/FollowUsers';
|
|
import { ProfileForm } from './components/ProfileForm';
|
|
|
|
export class Onboarding extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.recordBillboardConversion();
|
|
|
|
const slides = [ProfileForm, FollowTags, FollowUsers, EmailPreferencesForm];
|
|
|
|
this.nextSlide = this.nextSlide.bind(this);
|
|
this.prevSlide = this.prevSlide.bind(this);
|
|
this.slidesCount = slides.length;
|
|
|
|
this.state = {
|
|
currentSlide: 0,
|
|
};
|
|
|
|
this.slides = slides.map((SlideComponent, index) => (
|
|
<SlideComponent
|
|
next={this.nextSlide}
|
|
prev={this.prevSlide}
|
|
slidesCount={this.slidesCount}
|
|
currentSlideIndex={index}
|
|
key={index}
|
|
communityConfig={props.communityConfig}
|
|
/>
|
|
));
|
|
}
|
|
|
|
nextSlide() {
|
|
const { currentSlide } = this.state;
|
|
const nextSlide = currentSlide + 1;
|
|
if (nextSlide < this.slides.length) {
|
|
this.setState({
|
|
currentSlide: nextSlide,
|
|
});
|
|
} else if (localStorage && localStorage.getItem('last_interacted_billboard')) {
|
|
const obj = JSON.parse(localStorage.getItem('last_interacted_billboard'))
|
|
if (obj.path && obj.time && Date.parse(obj.time) > Date.now() - 900000) {
|
|
window.location.href = obj.path;
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
|
|
prevSlide() {
|
|
const { currentSlide } = this.state;
|
|
const prevSlide = currentSlide - 1;
|
|
if (prevSlide >= 0) {
|
|
this.setState({
|
|
currentSlide: prevSlide,
|
|
});
|
|
}
|
|
}
|
|
|
|
recordBillboardConversion() {
|
|
if (!localStorage || !localStorage.getItem('last_interacted_billboard')) {
|
|
return;
|
|
}
|
|
const dataBody = JSON.parse(localStorage.getItem('last_interacted_billboard'));
|
|
|
|
if (dataBody && dataBody['billboard_event']) {
|
|
dataBody['billboard_event']['category'] = 'signup';
|
|
|
|
const tokenMeta = document.querySelector("meta[name='csrf-token']");
|
|
const csrfToken = tokenMeta && tokenMeta.getAttribute('content');
|
|
window.fetch('/billboard_events', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRF-Token': csrfToken,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(dataBody),
|
|
credentials: 'same-origin',
|
|
});
|
|
}
|
|
}
|
|
// TODO: Update main element id to enable skip link. See issue #1153.
|
|
render() {
|
|
const { currentSlide } = this.state;
|
|
const { communityConfig } = this.props;
|
|
return (
|
|
<main
|
|
className="onboarding-body"
|
|
style={
|
|
communityConfig.communityBackgroundColor &&
|
|
communityConfig.communityBackgroundColor2
|
|
? {
|
|
background: `linear-gradient(${communityConfig.communityBackgroundColor},
|
|
${communityConfig.communityBackgroundColor2})`,
|
|
}
|
|
: { top: 777 }
|
|
}
|
|
>
|
|
<FocusTrap
|
|
key={`onboarding-${currentSlide}`}
|
|
clickOutsideDeactivates="true"
|
|
>
|
|
{this.slides[currentSlide]}
|
|
</FocusTrap>
|
|
</main>
|
|
);
|
|
}
|
|
}
|
|
|
|
Onboarding.propTypes = {
|
|
communityConfig: PropTypes.shape({
|
|
communityName: PropTypes.string.isRequired,
|
|
communityBackgroundColor: PropTypes.string.isRequired,
|
|
communityLogo: PropTypes.string.isRequired,
|
|
communityDescription: PropTypes.string.isRequired,
|
|
}).isRequired,
|
|
};
|