From 058edef86abe7e66097da7af43c6748b3c05a19e Mon Sep 17 00:00:00 2001
From: tomlum <tomlumperson@gmail.com>
Date: Tue, 26 Oct 2021 13:11:26 -0400
Subject: [PATCH] adds modal progress and new logic for showing share button on
project page
---
.../email-confirmation/banner.jsx | 46 +++++++++++++++++++
.../modal/email-confirmation/modal.jsx | 26 +++++++++++
src/views/preview/presentation.jsx | 26 ++++++++---
src/views/preview/project-view.jsx | 10 ++++
src/views/splash/presentation.jsx | 31 ++-----------
5 files changed, 106 insertions(+), 33 deletions(-)
create mode 100644 src/components/dropdown-banner/email-confirmation/banner.jsx
create mode 100644 src/components/modal/email-confirmation/modal.jsx
diff --git a/src/components/dropdown-banner/email-confirmation/banner.jsx b/src/components/dropdown-banner/email-confirmation/banner.jsx
new file mode 100644
index 000000000..c197b02df
--- /dev/null
+++ b/src/components/dropdown-banner/email-confirmation/banner.jsx
@@ -0,0 +1,46 @@
+import React, {useState} from 'react';
+import DropdownBanner from '../banner.jsx';
+
+
+/* <IframeModal
+
+ componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
+ this.emailConfirmationiFrame = iframe;
+ }}
+ isOpen={this.props.emailConfirmationModalOpen}
+ key="iframe-modal"
+ src="/accounts/email_resend_standalone/"
+ onRequestClose={this.props.onHideEmailConfirmationModal}
+ /> */
+
+
+const EmailConfirmationBanner = onRequestDismiss => {
+
+ const [showEmailConfirmationModal, setShowEmailConfirmationModal] = useState(false);
+
+ return (
+ <React.Fragment>
+ {(showEmailConfirmationModal && <h1>test</h1>)}
+ <DropdownBanner
+ className="warning"
+ key="confirmedEmail"
+ onRequestDismiss={onRequestDismiss}
+ >
+ <a
+ href="#"
+ onClick={setShowEmailConfirmationModal(true)}
+ >
+ Confirm your email
+ </a>{' '}to enable sharing.{' '}
+ <a href="/faq/#accounts">
+ Having trouble?
+ </a>
+ </DropdownBanner>
+ </React.Fragment>);
+};
+
+EmailConfirmationBanner.propTypes = {
+
+};
+
+module.exports = EmailConfirmationBanner;
diff --git a/src/components/modal/email-confirmation/modal.jsx b/src/components/modal/email-confirmation/modal.jsx
new file mode 100644
index 000000000..9ed283b1e
--- /dev/null
+++ b/src/components/modal/email-confirmation/modal.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import Modal from '../base/modal.jsx';
+import ModalTitle from '../base/modal-title.jsx';
+// import ModalInnerContent from '../../../components/modal/base/modal-inner-content.jsx';
+
+// import './manager-limit-modal.scss';
+// import {STUDIO_MANAGER_LIMIT} from '../../../redux/studio.js';
+
+
+const EmailConfirmationModal = () => (
+ <Modal
+ isOpen
+ >
+ <ModalTitle />
+ test 1234
+ </Modal>
+);
+
+EmailConfirmationModal.propTypes = {
+ handleClose: PropTypes.func
+};
+
+export default EmailConfirmationModal;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 408bed818..5762e4736 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -32,6 +32,7 @@ const ComposeComment = require('./comment/compose-comment.jsx');
const ExtensionChip = require('./extension-chip.jsx');
const thumbnailUrl = require('../../lib/user-thumbnail');
const FormsyProjectUpdater = require('./formsy-project-updater.jsx');
+const EmailConfirmationModal = require('../../components/modal/emailConfirmation/modal.jsx').default;
const projectShape = require('./projectshape.jsx').projectShape;
require('./preview.scss');
@@ -62,6 +63,7 @@ const PreviewPresentation = ({
canRestoreComments,
canSave,
canShare,
+ canSeeShare,
canToggleComments,
canUseBackpack,
cloudHost,
@@ -109,6 +111,7 @@ const PreviewPresentation = ({
onSeeInside,
onSetProjectThumbnailer,
onShare,
+ onShareAttempt,
onSocialClicked,
onSocialClosed,
onToggleComments,
@@ -129,6 +132,7 @@ const PreviewPresentation = ({
reportOpen,
showAdminPanel,
showModInfo,
+ showEmailConfirmationModal,
singleCommentId,
socialOpen,
userOwnsProject,
@@ -170,7 +174,7 @@ const PreviewPresentation = ({
}
/>
);
- } else if (canShare) {
+ } else if (canSeeShare) {
if (isShared && justShared) { // if was shared a while ago, don't show any share banner
if (isNewScratcher) {
banner = (<Banner
@@ -184,11 +188,20 @@ const PreviewPresentation = ({
/>);
}
} else if (!isShared) {
- banner = (<Banner
- actionMessage={<FormattedMessage id="project.share.shareButton" />}
- message={<FormattedMessage id="project.share.notShared" />}
- onAction={onShare}
- />);
+ if (canShare){
+ banner = (<Banner
+ actionMessage={<FormattedMessage id="project.share.shareButton" />}
+ message={<FormattedMessage id="project.share.notShared" />}
+ onAction={onShare}
+ />);
+ } else {
+ banner = (<Banner
+ actionMessage={<FormattedMessage id="project.share.shareButton" />}
+ message={<FormattedMessage id="project.share.notShared" />}
+ onAction={onShareAttempt}
+ />
+ );
+ }
}
}
@@ -208,6 +221,7 @@ const PreviewPresentation = ({
);
return (
<div className="preview">
+ {showEmailConfirmationModal && <EmailConfirmationModal />}
{showAdminPanel && (
<AdminPanel
className={classNames('project-admin-panel', {
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index a5b79d840..30aa39c2d 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -78,6 +78,7 @@ class Preview extends React.Component {
'handleSeeInside',
'handleSetProjectThumbnailer',
'handleShare',
+ 'handleShareAttempt',
'handleUpdateProjectData',
'handleUpdateProjectId',
'handleUpdateProjectTitle',
@@ -121,6 +122,7 @@ class Preview extends React.Component {
},
showCloudDataAlert: false,
showUsernameBlockAlert: false,
+ showEmailConfirmationModal: false,
projectId: parts[1] === 'editor' ? '0' : parts[1],
reportOpen: false,
singleCommentId: singleCommentId,
@@ -619,6 +621,11 @@ class Preview extends React.Component {
justShared: true
});
}
+ handleShareAttempt () {
+ this.setState({
+ showEmailConfirmationModal: true
+ });
+ }
handleUpdateProjectTitle (title) {
this.props.updateProject(
this.props.projectInfo.id,
@@ -727,6 +734,7 @@ class Preview extends React.Component {
canRestoreComments={this.props.isAdmin}
canSave={this.props.canSave}
canShare={this.props.canShare || this.props.isAdmin}
+ canSeeShare={this.props.userOwnsProject || this.props.isAdmin}
canToggleComments={this.props.canToggleComments}
canUseBackpack={this.props.canUseBackpack}
cloudHost={this.props.cloudHost}
@@ -762,6 +770,7 @@ class Preview extends React.Component {
showAdminPanel={this.props.isAdmin}
showCloudDataAlert={this.state.showCloudDataAlert}
showModInfo={this.props.isAdmin}
+ showEmailConfirmationModal={this.state.showEmailConfirmationModal}
showUsernameBlockAlert={this.state.showUsernameBlockAlert}
singleCommentId={this.state.singleCommentId}
socialOpen={this.state.socialOpen}
@@ -790,6 +799,7 @@ class Preview extends React.Component {
onSeeInside={this.handleSeeInside}
onSetProjectThumbnailer={this.handleSetProjectThumbnailer}
onShare={this.handleShare}
+ onShareAttempt={this.handleShareAttempt}
onSocialClicked={this.handleSocialClick}
onSocialClosed={this.handleSocialClose}
onToggleComments={this.handleToggleComments}
diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx
index 2db6a9e97..8266acf58 100644
--- a/src/views/splash/presentation.jsx
+++ b/src/views/splash/presentation.jsx
@@ -375,35 +375,12 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
return (
<div className="splash">
- {this.props.shouldShowEmailConfirmation ? [
- <DropdownBanner
- className="warning"
- key="confirmedEmail"
- onRequestDismiss={() => { // eslint-disable-line react/jsx-no-bind
+ {(this.props.shouldShowEmailConfirmation &&
+ <EmailConfirmationBanner
+ onRequestDismis={() => { // eslint-disable-line react/jsx-no-bind
this.props.onDismiss('confirmed_email');
}}
- >
- <a
- href="#"
- onClick={this.props.onShowEmailConfirmationModal}
- >
- Confirm your email
- </a>{' '}to enable sharing.{' '}
- <a href="/faq/#accounts">
- Having trouble?
- </a>
- </DropdownBanner>,
- <IframeModal
- className="mod-confirmation"
- componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
- this.emailConfirmationiFrame = iframe;
- }}
- isOpen={this.props.emailConfirmationModalOpen}
- key="iframe-modal"
- src="/accounts/email_resend_standalone/"
- onRequestClose={this.props.onHideEmailConfirmationModal}
- />
- ] : []}
+ />)}
{this.props.isEducator ? [
<TeacherBanner
key="teacherbanner"