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"