diff --git a/src/components/CreateTeam/RoadmapSelector.tsx b/src/components/CreateTeam/RoadmapSelector.tsx index 499afe99c..b3d160276 100644 --- a/src/components/CreateTeam/RoadmapSelector.tsx +++ b/src/components/CreateTeam/RoadmapSelector.tsx @@ -15,6 +15,7 @@ import { useToast } from '../../hooks/use-toast'; export type TeamResourceConfig = { isCustomResource: boolean; title: string; + description?: string; visibility?: AllowedRoadmapVisibility; resourceId: string; resourceType: string; diff --git a/src/components/CustomRoadmap/PersonalRoadmapList.tsx b/src/components/CustomRoadmap/PersonalRoadmapList.tsx index 7adbbfd87..7ac2e978a 100644 --- a/src/components/CustomRoadmap/PersonalRoadmapList.tsx +++ b/src/components/CustomRoadmap/PersonalRoadmapList.tsx @@ -60,6 +60,7 @@ export function PersonalRoadmapList(props: PersonalRoadmapListType) { const shareSettingsModal = selectedRoadmap && ( {isSharing && $canManageCurrentRoadmap && $currentRoadmap && ( {isSharing && $currentRoadmap && ( Edit Roadmap @@ -151,7 +152,7 @@ export function RoadmapHeader(props: RoadmapHeaderProps) { - - - - ); -} diff --git a/src/components/ShareOptions/ShareOptionsModal.tsx b/src/components/ShareOptions/ShareOptionsModal.tsx index 55ab934bc..04ad85a34 100644 --- a/src/components/ShareOptions/ShareOptionsModal.tsx +++ b/src/components/ShareOptions/ShareOptionsModal.tsx @@ -7,7 +7,7 @@ import { ShareTeamMemberList, type TeamMemberList, } from './ShareTeamMemberList'; -import { CopyRoadmapLink } from './CopyRoadmapLink'; +import { ShareSuccess } from './ShareSuccess'; import { useToast } from '../../hooks/use-toast'; import type { AllowedRoadmapVisibility } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; import { httpPatch } from '../../lib/http'; @@ -28,6 +28,7 @@ type ShareOptionsModalProps = { sharedTeamMemberIds?: string[]; teamId?: string; roadmapId?: string; + description?: string; onShareSettingsUpdate: OnShareSettingsUpdate; }; @@ -41,6 +42,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { sharedFriendIds: defaultSharedFriendIds = [], teamId, onShareSettingsUpdate, + description, } = props; const toast = useToast(); @@ -156,7 +158,12 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) { wrapperClassName="max-w-lg" bodyClassName="p-4 flex flex-col" > - + ); } diff --git a/src/components/ShareOptions/ShareSuccess.tsx b/src/components/ShareOptions/ShareSuccess.tsx new file mode 100644 index 000000000..8704b23b0 --- /dev/null +++ b/src/components/ShareOptions/ShareSuccess.tsx @@ -0,0 +1,115 @@ +import { CheckCircle, Copy, Facebook, Linkedin, Twitter } from 'lucide-react'; +import { useCopyText } from '../../hooks/use-copy-text'; +import { cn } from '../../lib/classname'; +import type { AllowedRoadmapVisibility } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; + +type ShareSuccessProps = { + roadmapId: string; + onClose: () => void; + visibility: AllowedRoadmapVisibility; + description?: string; +}; + +export function ShareSuccess(props: ShareSuccessProps) { + const { roadmapId, onClose, description, visibility } = props; + + const baseUrl = import.meta.env.DEV + ? 'http://localhost:3000' + : 'https://roadmap.sh'; + const shareLink = `${baseUrl}/r?id=${roadmapId}`; + + const { copyText, isCopied } = useCopyText(); + + const socialShareLinks = [ + { + title: 'Twitter', + href: `https://twitter.com/intent/tweet?text=${description}&url=${shareLink}`, + icon: Twitter, + }, + { + title: 'Facebook', + href: `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${shareLink}`, + icon: Facebook, + }, + { + title: 'Linkedin', + href: `https://www.linkedin.com/sharing/share-offsite/?url=${shareLink}`, + icon: Linkedin, + }, + ]; + + return ( +
+
+ +

Sharing Settings Updated

+
+ + { + e.currentTarget.select(); + copyText(shareLink); + }} + /> +

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

+ + {visibility === 'public' && ( + <> +
+ + Or + +
+ +
+ Share on +
    + {socialShareLinks.map((socialShareLink) => ( +
  • + + + +
  • + ))} +
+
+ + )} + +
+ + +
+
+ ); +} diff --git a/src/components/TeamRoadmapsList/TeamRoadmaps.tsx b/src/components/TeamRoadmapsList/TeamRoadmaps.tsx index 13ad909aa..7867c5c0a 100644 --- a/src/components/TeamRoadmapsList/TeamRoadmaps.tsx +++ b/src/components/TeamRoadmapsList/TeamRoadmaps.tsx @@ -311,6 +311,7 @@ export function TeamRoadmaps() { const shareSettingsModal = selectedResource && (