+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
);
+
+TransferHostInfo.propTypes = {
+ handleClose: PropTypes.func,
+ handleNext: PropTypes.func
+};
+
+export default TransferHostInfo;
diff --git a/src/views/studio/modals/transfer-host-modal.jsx b/src/views/studio/modals/transfer-host-modal.jsx
new file mode 100644
index 000000000..da16c88d3
--- /dev/null
+++ b/src/views/studio/modals/transfer-host-modal.jsx
@@ -0,0 +1,58 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+import keyMirror from 'keymirror';
+
+import Modal from '../../../components/modal/base/modal.jsx';
+import ModalTitle from '../../../components/modal/base/modal-title.jsx';
+
+import TransferHostInfo from './transfer-host-info.jsx';
+import TransferHostSelection from './transfer-host-selection.jsx';
+import TransferHostConfirmation from './transfer-host-confirmation.jsx';
+
+import './transfer-host-modal.scss';
+
+const STEPS = keyMirror({
+ info: null,
+ selection: null,
+ confirmation: null
+});
+
+const TransferHostModal = ({
+ handleClose
+}) => {
+ const [step, setStep] = useState(STEPS.info);
+ const [selectedId, setSelectedId] = useState(null);
+ return (
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {items.filter(item => hostId !== item.id).map(item =>
+ ( handleSelected(item.id)}
+ id={item.id}
+ username={item.username}
+ image={item.profile.images['90x90']}
+ isCreator={false}
+ selected={item.id === selectedId}
+ />)
+ )}
+ {moreToLoad &&
+
+
+
+
+ }
+
+
+
+
+
+ 
+
+);
+
+TransferHostTile.propTypes = {
+ className: PropTypes.string,
+ username: PropTypes.string,
+ handleSelected: PropTypes.func,
+ image: PropTypes.string,
+ selected: PropTypes.bool
+};
+
+export default TransferHostTile;
diff --git a/src/views/studio/studio-member-tile.jsx b/src/views/studio/studio-member-tile.jsx
index ee75655fa..2171b9042 100644
--- a/src/views/studio/studio-member-tile.jsx
+++ b/src/views/studio/studio-member-tile.jsx
@@ -7,10 +7,13 @@ import {FormattedMessage} from 'react-intl';
import PromoteModal from './modals/promote-modal.jsx';
import ManagerLimitModal from './modals/manager-limit-modal.jsx';
+import TransferHostModal from './modals/transfer-host-modal.jsx';
import {
- selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators
+ selectCanRemoveCurator, selectCanRemoveManager, selectCanPromoteCurators,
+ selectCanTransfer
} from '../../redux/studio-permissions';
+import {selectStudioTransferLaunched} from '../../redux/session.js';
import {
Errors,
promoteCurator,
@@ -26,11 +29,13 @@ import removeIcon from './icons/remove-icon.svg';
import promoteIcon from './icons/curator-icon.svg';
const StudioMemberTile = ({
- canRemove, canPromote, onRemove, onPromote, isCreator, hasReachedManagerLimit, // mapState props
+ canRemove, canPromote, onRemove, canTransferHost, onPromote,
+ isCreator, hasReachedManagerLimit, // mapState props
username, image // own props
}) => {
const [submitting, setSubmitting] = useState(false);
- const [modalOpen, setModalOpen] = useState(false);
+ const [promoteModalOpen, setPromoteModalOpen] = useState(false);
+ const [transferHostModalOpen, setTransferHostModalOpen] = useState(false);
const [managerLimitReached, setManagerLimitReached] = useState(false);
const {errorAlert, successAlert} = useAlertContext();
const userUrl = `/users/${username}`;
@@ -49,12 +54,12 @@ const StudioMemberTile = ({
>{username}
{isCreator &&
+
+ {selected &&
+
+ {username}
+
+
+ 
+
}
+
+