diff --git a/src/components/CustomRoadmap/RoadmapHeader.tsx b/src/components/CustomRoadmap/RoadmapHeader.tsx index 07b1ade4c..8b09ea8cc 100644 --- a/src/components/CustomRoadmap/RoadmapHeader.tsx +++ b/src/components/CustomRoadmap/RoadmapHeader.tsx @@ -9,6 +9,8 @@ import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector'; import { useToast } from '../../hooks/use-toast'; import { RoadmapActionButton } from './RoadmapActionButton'; import { Lock, Shapes } from 'lucide-react'; +import { Modal } from '../Modal'; +import { ShareSuccess } from '../ShareOptions/ShareSuccess'; type RoadmapHeaderProps = {}; @@ -22,9 +24,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { _id: roadmapId, creator, team, + visibility, } = useStore(currentRoadmap) || {}; const [isSharing, setIsSharing] = useState(false); + const [isSharingWithOthers, setIsSharingWithOthers] = useState(false); const toast = useToast(); async function deleteResource() { @@ -65,6 +69,22 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}` : '/images/default-avatar.png'; + const sharingWithOthersModal = isSharingWithOthers && ( + setIsSharingWithOthers(false)} + wrapperClassName="max-w-lg" + bodyClassName="p-4 flex flex-col" + > + setIsSharingWithOthers(false)} + isSharingWithOthers={true} + /> + + ); + return (
@@ -117,63 +137,78 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { Subscribe
- {$canManageCurrentRoadmap && ( -
- {isSharing && $currentRoadmap && ( - setIsSharing(false)} - onShareSettingsUpdate={(settings) => { - currentRoadmap.set({ - ...$currentRoadmap, - ...settings, - }); +
+ {$canManageCurrentRoadmap && ( + <> + {isSharing && $currentRoadmap && ( + setIsSharing(false)} + onShareSettingsUpdate={(settings) => { + currentRoadmap.set({ + ...$currentRoadmap, + ...settings, + }); + }} + /> + )} + + + + Edit Roadmap + Edit + + + + { + const confirmation = window.confirm( + 'Are you sure you want to delete this roadmap?' + ); + + if (!confirmation) { + return; + } + + deleteResource().finally(() => null); }} /> - )} - - - - Edit Roadmap - Edit - - - - { - const confirmation = window.confirm( - 'Are you sure you want to delete this roadmap?' - ); - - if (!confirmation) { - return; - } - - deleteResource().finally(() => null); - }} - /> -
- )} + + )} + + {!$canManageCurrentRoadmap && visibility === 'public' && ( + <> + {sharingWithOthersModal} + + + )} +
void; visibility: AllowedRoadmapVisibility; description?: string; + isSharingWithOthers?: boolean; }; export function ShareSuccess(props: ShareSuccessProps) { - const { roadmapId, onClose, description, visibility } = props; + const { + roadmapId, + onClose, + description, + visibility, + isSharingWithOthers = false, + } = props; const baseUrl = import.meta.env.DEV ? 'http://localhost:3000' @@ -42,7 +49,11 @@ export function ShareSuccess(props: ShareSuccessProps) {
-

Sharing Settings Updated

+ {isSharingWithOthers ? ( +

Sharing with Others

+ ) : ( +

Sharing Settings Updated

+ )}
-

- You can share the above link with anyone who has access -

+ {isSharingWithOthers ? ( +

+ You can share the above link with anyone +

+ ) : ( +

+ You can share the above link with anyone who has access +

+ )} {visibility === 'public' && ( <>
- Or + Or