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