-
diff --git a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx
index 6edc934247..ffa040aa30 100644
--- a/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx
+++ b/packages/shared/src/components/opportunity/OpportunityEditModal/OpportunityReimportModal.tsx
@@ -44,10 +44,9 @@ export const OpportunityReimportModal = ({
const { mutate: reimportOpportunity, isPending } = useMutation({
...reimportOpportunityMutationOptions(),
- onSuccess: () => {
- queryClient.invalidateQueries({
- queryKey: getOpportunityByIdKey(opportunityId),
- });
+ onSuccess: (data) => {
+ // Immediately update the cache with the returned data
+ queryClient.setQueryData(getOpportunityByIdKey(opportunityId), data);
onRequestClose?.(null);
},
onError: (err) => {
@@ -131,7 +130,7 @@ export const OpportunityReimportModal = ({
+
+ );
+}
+
+export default BrowserPreviewFrame;
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/EditPreviewTabs.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/EditPreviewTabs.tsx
new file mode 100644
index 0000000000..34fa6fed29
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/EditPreviewTabs.tsx
@@ -0,0 +1,84 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyType,
+ TypographyColor,
+} from '../../typography/Typography';
+import { EditIcon, EyeIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+
+export enum EditPreviewTab {
+ Edit = 'edit',
+ Preview = 'preview',
+}
+
+export interface EditPreviewTabsProps {
+ activeTab: EditPreviewTab;
+ onTabChange: (tab: EditPreviewTab) => void;
+ className?: string;
+}
+
+export function EditPreviewTabs({
+ activeTab,
+ onTabChange,
+ className,
+}: EditPreviewTabsProps): ReactElement {
+ const tabs = [
+ {
+ id: EditPreviewTab.Edit,
+ label: 'Edit',
+ icon: EditIcon,
+ },
+ {
+ id: EditPreviewTab.Preview,
+ label: 'Preview',
+ icon: EyeIcon,
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {url}
+
+ }
+ onClick={() => copyLink()}
+ className="shrink-0 !p-0"
+ title={copying ? 'Copied!' : 'Copy URL'}
+ />
+
+ {children}
+
+ {tabs.map((tab) => {
+ const isActive = activeTab === tab.id;
+ const Icon = tab.icon;
+
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default EditPreviewTabs;
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/OpportunityEditPanel.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/OpportunityEditPanel.tsx
new file mode 100644
index 0000000000..6db897e15a
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/OpportunityEditPanel.tsx
@@ -0,0 +1,204 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyType,
+ TypographyColor,
+} from '../../typography/Typography';
+import { ArrowIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import type { Opportunity } from '../../../features/opportunity/types';
+import { RoleInfoSection } from './sections/RoleInfoSection';
+import { JobDetailsSection } from './sections/JobDetailsSection';
+import { ContentSection } from './sections/ContentSection';
+import { LinkedProfileSection } from './sections/LinkedProfileSection';
+
+export interface OpportunityEditPanelProps {
+ opportunity: Opportunity;
+ onSectionFocus?: (sectionId: string) => void;
+ className?: string;
+}
+
+interface CollapsibleSectionProps {
+ id: string;
+ title: string;
+ required?: boolean;
+ children: ReactNode;
+ defaultExpanded?: boolean;
+ onFocus?: () => void;
+}
+
+function CollapsibleSection({
+ id,
+ title,
+ required = false,
+ children,
+ defaultExpanded = true,
+ onFocus,
+}: CollapsibleSectionProps): ReactElement {
+ const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+ const handleClick = () => {
+ const willExpand = !isExpanded;
+ setIsExpanded(willExpand);
+ if (willExpand && onFocus) {
+ onFocus();
+ }
+ };
+
+ return (
+
+
+ {isExpanded && (
+
+ );
+}
+
+// Content section configuration for config-driven rendering
+type ContentSectionConfig = {
+ id:
+ | 'overview'
+ | 'responsibilities'
+ | 'requirements'
+ | 'whatYoullDo'
+ | 'interviewProcess';
+ title: string;
+ required: boolean;
+ getDefaultExpanded?: (opportunity: Opportunity) => boolean;
+};
+
+const contentSections: ContentSectionConfig[] = [
+ { id: 'overview', title: 'Overview', required: true },
+ { id: 'responsibilities', title: 'Responsibilities', required: true },
+ { id: 'requirements', title: 'Requirements', required: true },
+ {
+ id: 'whatYoullDo',
+ title: "What You'll Do",
+ required: false,
+ getDefaultExpanded: (opp) => !!opp?.content?.whatYoullDo?.html,
+ },
+ {
+ id: 'interviewProcess',
+ title: 'Interview Process',
+ required: false,
+ getDefaultExpanded: (opp) => !!opp?.content?.interviewProcess?.html,
+ },
+];
+
+export function OpportunityEditPanel({
+ opportunity,
+ onSectionFocus,
+ className,
+}: OpportunityEditPanelProps): ReactElement {
+ const company = opportunity?.organization;
+ const recruiter = opportunity?.recruiters?.[0];
+
+ return (
+
+ {children}
+
+ )}
+
+
+ );
+}
+
+export default OpportunityEditPanel;
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/hooks/index.ts b/packages/shared/src/components/opportunity/SideBySideEdit/hooks/index.ts
new file mode 100644
index 0000000000..f176117680
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from './useOpportunityEditForm';
+export * from './useScrollSync';
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/hooks/useOpportunityEditForm.ts b/packages/shared/src/components/opportunity/SideBySideEdit/hooks/useOpportunityEditForm.ts
new file mode 100644
index 0000000000..1c1f07c8ab
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/hooks/useOpportunityEditForm.ts
@@ -0,0 +1,245 @@
+import { useForm } from 'react-hook-form';
+import type { UseFormReturn } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useCallback, useEffect } from 'react';
+import type { Opportunity } from '../../../../features/opportunity/types';
+import { OpportunityState } from '../../../../features/opportunity/protobuf/opportunity';
+import {
+ opportunityEditInfoSchema,
+ createOpportunityEditContentSchema,
+} from '../../../../lib/schema/opportunity';
+
+export function getOpportunityStateLabel(state: OpportunityState): string {
+ switch (state) {
+ case OpportunityState.DRAFT:
+ return 'DRAFT';
+ case OpportunityState.LIVE:
+ return 'LIVE';
+ case OpportunityState.CLOSED:
+ return 'CLOSED';
+ case OpportunityState.IN_REVIEW:
+ return 'IN REVIEW';
+ default:
+ return 'DRAFT';
+ }
+}
+
+export function getOpportunityStateBadgeClass(state: OpportunityState): string {
+ switch (state) {
+ case OpportunityState.DRAFT:
+ return 'bg-status-warning text-white';
+ case OpportunityState.LIVE:
+ return 'bg-status-success text-white';
+ case OpportunityState.CLOSED:
+ return 'bg-text-disabled text-white';
+ case OpportunityState.IN_REVIEW:
+ return 'bg-status-info text-white';
+ default:
+ return 'bg-status-warning text-white';
+ }
+}
+
+export const opportunitySideBySideEditSchema = opportunityEditInfoSchema.extend(
+ {
+ content: z.object({
+ overview: createOpportunityEditContentSchema({
+ errorLabel: 'Overview is required',
+ }),
+ responsibilities: createOpportunityEditContentSchema({
+ errorLabel: 'Responsibilities are required',
+ }),
+ requirements: createOpportunityEditContentSchema({
+ errorLabel: 'Requirements are required',
+ }),
+ whatYoullDo: createOpportunityEditContentSchema({ optional: true }),
+ interviewProcess: createOpportunityEditContentSchema({ optional: true }),
+ }),
+ },
+);
+
+export type OpportunitySideBySideEditFormData = z.infer<
+ typeof opportunitySideBySideEditSchema
+>;
+
+export function opportunityToFormData(
+ opportunity: Opportunity | undefined,
+): OpportunitySideBySideEditFormData | undefined {
+ if (!opportunity) {
+ return undefined;
+ }
+
+ return {
+ title: opportunity.title || '',
+ tldr: opportunity.tldr || '',
+ keywords: opportunity.keywords?.map((k) => ({ keyword: k.keyword })) || [],
+ externalLocationId: opportunity.locations?.[0]?.location?.city || undefined,
+ locationType: opportunity.locations?.[0]?.type,
+ meta: {
+ employmentType: opportunity.meta?.employmentType ?? 0,
+ teamSize: opportunity.meta?.teamSize ?? 1,
+ salary: {
+ min: opportunity.meta?.salary?.min,
+ max: opportunity.meta?.salary?.max,
+ period: opportunity.meta?.salary?.period ?? 0,
+ },
+ seniorityLevel: opportunity.meta?.seniorityLevel ?? 0,
+ roleType: opportunity.meta?.roleType ?? 0.5,
+ },
+ content: {
+ overview: {
+ content: opportunity.content?.overview?.content || '',
+ },
+ responsibilities: {
+ content: opportunity.content?.responsibilities?.content || '',
+ },
+ requirements: {
+ content: opportunity.content?.requirements?.content || '',
+ },
+ whatYoullDo: {
+ content: opportunity.content?.whatYoullDo?.content || '',
+ },
+ interviewProcess: {
+ content: opportunity.content?.interviewProcess?.content || '',
+ },
+ },
+ };
+}
+
+export function formDataToPreviewOpportunity(
+ formData: Partial
+
+ Edit Job Posting
+
+
+ Changes are auto-saved locally. Click Save to publish.
+
+
+
+
+ {/* Role Info section with form inputs */}
+ onSectionFocus?.('roleInfo')}
+ >
+
+
+ {/* Content sections - config-driven */}
+ {contentSections.map((section) => (
+ onSectionFocus?.(section.id)}
+ >
+ onSectionFocus?.(section.id)}
+ />
+
+ ))}
+
+ {/* Linked profiles - flat list without collapsible wrapper */}
+
+
+
+
+
+ Linked profiles
+
+
+
+ (
+ {
+ field.onChange(value);
+ }}
+ onFocus={onFocus}
+ className={{
+ container: 'flex-1 !rounded-none !border-0',
+ }}
+ />
+ )}
+ />
+ {!!hint && (
+
+ );
+}
+
+export default ContentSection;
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/sections/JobDetailsSection.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/sections/JobDetailsSection.tsx
new file mode 100644
index 0000000000..db5399afdd
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/sections/JobDetailsSection.tsx
@@ -0,0 +1,202 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import classNames from 'classnames';
+import { TextField } from '../../../fields/TextField';
+import { Radio } from '../../../fields/Radio';
+import { Dropdown } from '../../../fields/Dropdown';
+import { Typography, TypographyType } from '../../../typography/Typography';
+import type { OpportunitySideBySideEditFormData } from '../hooks/useOpportunityEditForm';
+
+const salaryPeriodOptions = ['Annually', 'Monthly', 'Hourly'];
+
+const seniorityOptions = [
+ 'Intern',
+ 'Junior',
+ 'Mid',
+ 'Senior',
+ 'Lead',
+ 'Manager',
+ 'Director',
+ 'VP',
+ 'C-Level',
+];
+
+const roleTypeOptions = [
+ { value: 0, title: 'IC' },
+ { value: 0.5, title: 'Auto' },
+ { value: 1, title: 'Management' },
+];
+
+export function JobDetailsSection(): ReactElement {
+ const {
+ register,
+ control,
+ formState: { errors },
+ } = useFormContext
+ {hint}
+
+ )}
+
+
+ );
+}
+
+export default JobDetailsSection;
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/sections/LinkedProfileSection.tsx b/packages/shared/src/components/opportunity/SideBySideEdit/sections/LinkedProfileSection.tsx
new file mode 100644
index 0000000000..25e1f9cd39
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/sections/LinkedProfileSection.tsx
@@ -0,0 +1,113 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyColor,
+ TypographyType,
+} from '../../../typography/Typography';
+import { EditIcon } from '../../../icons';
+import { IconSize } from '../../../Icon';
+import Link from '../../../utilities/Link';
+
+export interface LinkedProfileSectionProps {
+ type: 'company' | 'recruiter';
+ name?: string;
+ image?: string;
+ subtitle?: string;
+ editUrl: string;
+ emptyMessage: string;
+}
+
+export function LinkedProfileSection({
+ type,
+ name,
+ image,
+ subtitle,
+ editUrl,
+ emptyMessage,
+}: LinkedProfileSectionProps): ReactElement {
+ const hasData = !!name;
+
+ if (!hasData) {
+ return (
+
+
+ Employment type*
+
+ (
+ field.onChange(Number(value))}
+ valid={!errors.meta?.employmentType}
+ />
+ )}
+ />
+ {errors.meta?.employmentType && (
+
+ {errors.meta.employmentType.message as string}
+
+ )}
+
+
+
+
+ Seniority level*
+
+ (
+ {
+ const valueIndex = seniorityOptions.indexOf(value);
+ field.onChange(valueIndex + 1);
+ }}
+ valid={!errors.meta?.seniorityLevel}
+ hint={errors.meta?.seniorityLevel?.message as string}
+ />
+ )}
+ />
+
+
+
+
+ Job type*
+
+ (
+ option.value === field.value,
+ )}
+ options={roleTypeOptions.map((option) => option.title)}
+ onChange={(value) => {
+ const item = roleTypeOptions.find(
+ (option) => option.title === value,
+ );
+ field.onChange(item?.value ?? 0);
+ }}
+ valid={!errors.meta?.roleType}
+ hint={errors.meta?.roleType?.message as string}
+ />
+ )}
+ />
+
+
+
+
+ Salary range (USD)
+
+ {!!errors.meta?.salary && (
+
+
+ {errors.meta.salary.message as string}
+
+ )}
+
+ (
+ {
+ const valueIndex = salaryPeriodOptions.indexOf(value);
+ field.onChange(valueIndex + 1);
+ }}
+ valid={!errors.meta?.salary?.period}
+ hint={errors.meta?.salary?.period?.message as string}
+ />
+ )}
+ />
+
+
+
+ {name?.charAt(0)?.toUpperCase()}
+
+
+ )}
+
+
+
+ {name}
+
+ {renderSubtitle()}
+
+
+
+
+ );
+}
+
+export default RoleInfoSection;
diff --git a/packages/shared/src/components/opportunity/SideBySideEdit/sections/index.ts b/packages/shared/src/components/opportunity/SideBySideEdit/sections/index.ts
new file mode 100644
index 0000000000..4e2368a161
--- /dev/null
+++ b/packages/shared/src/components/opportunity/SideBySideEdit/sections/index.ts
@@ -0,0 +1,4 @@
+export * from './RoleInfoSection';
+export * from './JobDetailsSection';
+export * from './ContentSection';
+export * from './LinkedProfileSection';
diff --git a/packages/shared/src/components/recruiter/layout/Sidebar.tsx b/packages/shared/src/components/recruiter/layout/Sidebar.tsx
index ddbdd0cb4f..baf083275a 100644
--- a/packages/shared/src/components/recruiter/layout/Sidebar.tsx
+++ b/packages/shared/src/components/recruiter/layout/Sidebar.tsx
@@ -20,7 +20,7 @@ import { LogoutReason } from '../../../lib/user';
const Header = () => (
+
+ Preferred tech stack*
+
+
+ Define the tools, technologies, and languages you need.
+
+ (
+ {
+ field.onChange([
+ ...(field.value || []),
+ ...value.map((item) => ({ keyword: item })),
+ ]);
+ }}
+ removeKeyword={(value) => {
+ field.onChange(
+ (field.value || []).filter(
+ (item: { keyword: string }) =>
+ !value.includes(item.keyword),
+ ),
+ );
+ }}
+ valid={!errors.keywords}
+ hint={errors.keywords?.message as string}
+ />
+ )}
+ />
+
+
+
-
);
@@ -133,7 +133,7 @@ const StateSubsection = ({
{opportunities.map((opportunity) => {
const isDraft = opportunity.state === OpportunityState.DRAFT;
- const path = isDraft ? 'prepare' : 'matches';
+ const path = isDraft ? 'edit' : 'matches';
return (
}
diff --git a/packages/webapp/components/layouts/RecruiterFullscreenLayout.tsx b/packages/webapp/components/layouts/RecruiterFullscreenLayout.tsx
new file mode 100644
index 0000000000..3a88dd04eb
--- /dev/null
+++ b/packages/webapp/components/layouts/RecruiterFullscreenLayout.tsx
@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import React, { useContext, useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { InAppNotificationElement } from '@dailydotdev/shared/src/components/notifications/InAppNotification';
+import { PromptElement } from '@dailydotdev/shared/src/components/modals/Prompt';
+import Toast from '@dailydotdev/shared/src/components/notifications/Toast';
+import SettingsContext from '@dailydotdev/shared/src/contexts/SettingsContext';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useGrowthBookContext } from '@dailydotdev/shared/src/components/GrowthBookProvider';
+import {
+ isTesting,
+ onboardingUrl,
+} from '@dailydotdev/shared/src/lib/constants';
+import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
+import { PendingSubmissionProvider } from '@dailydotdev/shared/src/features/opportunity/context/PendingSubmissionContext';
+import { useIntercom } from '../../hooks/useIntercom';
+
+const RecruiterFullscreenLayoutInner = ({
+ children,
+}: {
+ children: ReactNode;
+}) => {
+ const router = useRouter();
+ const { user, isAuthReady, showLogin } = useAuthContext();
+ const { growthbook } = useGrowthBookContext();
+ const { autoDismissNotifications } = useContext(SettingsContext);
+
+ useIntercom();
+
+ const isPageReady =
+ (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
+ const shouldRedirectOnboarding = !user && isPageReady && !isTesting;
+
+ useEffect(() => {
+ if (!shouldRedirectOnboarding) {
+ return;
+ }
+
+ const entries = Object.entries(router.query);
+
+ if (entries.length === 0) {
+ router.push(onboardingUrl);
+ return;
+ }
+
+ const params = new URLSearchParams();
+
+ entries.forEach(([key, value]) => {
+ params.append(key, value as string);
+ });
+
+ params.delete('id');
+
+ router.push(`${onboardingUrl}?${params.toString()}`);
+ }, [shouldRedirectOnboarding, router]);
+
+ const shouldShowLogin = !user && isAuthReady;
+
+ useEffect(() => {
+ if (!shouldShowLogin) {
+ return;
+ }
+
+ showLogin({
+ trigger: AuthTriggers.Opportunity,
+ options: { isLogin: true },
+ });
+ }, [shouldShowLogin, showLogin]);
+
+ if (!isPageReady || shouldRedirectOnboarding) {
+ return null;
+ }
+
+ return (
+
+
+
-
-
@@ -472,16 +485,14 @@ const JobPage = ({
)}
>
{/* Header */}
- {!hideHeader && (!canEdit || !!match) && (
+ {!hideHeader && !previewMode && (
- {!canEdit && (
+ {!previewMode && (
- {
- openModal({
- type: LazyModal.OpportunityEdit,
- props: {
- type: 'organization',
- payload: {
- id: opportunity.id,
- },
- },
- });
- }}
- />
-
{!!opportunity.organization?.website && (
)}
{hasLinks && (
@@ -1033,7 +926,10 @@ const JobPage = ({
{/* Recruiter Info */}
{!hideRecruiterPanel && opportunity?.recruiters?.length > 0 && (
-
- {!canEdit && (
- }
- />
- )}
+ }
+ />
{!!match && (
)}
- {/* Edit mode banner */}
- {canEdit && (
-
{/* Sidebar */}
- {(!hideCompanyPanel || !hideRecruiterPanel || !canEdit) && (
+ {(!hideCompanyPanel || !hideRecruiterPanel) && (
-
- Editing mode — Click Save on each section to save changes
-
-
- )}
-
{/* Content */}
{!hideCompanyBadge && !!opportunity.organization && (
@@ -564,35 +563,12 @@ const JobPage = ({
)}
{/* Role Info - Title, Tags, TLDR, Details */}
- {canEdit ? (
-
- }
- onClick={() => {
- openModal({
- type: LazyModal.OpportunityReimport,
- props: {
- opportunityId: opportunity.id,
- },
- });
- }}
- />
-
- }
- >
-
- ) : (
+
)}
- {canEdit && (
-
-
- Candidates will see a personalized message here explaining why
- this role matches their skills and interests based on their
- daily.dev activity.
-
-
- )}
- {/* Content sections - inline editors for edit mode, accordions for candidates */}
- {canEdit ? (
-
-
- AI personalized message
-
-
-
-
- ) : (
- faq.map((faqItem, index) => {
- const contentHtml = opportunity.content[faqItem.key]?.html;
-
- if (!contentHtml) {
- return null; // Don't show empty sections to candidates
- }
-
- return (
-
-
- This is the format developers actually read and trust. Based
- on feedback from our community.
-
-
- {faq.map((faqItem) => (
- {
+ const contentHtml = opportunity.content[faqItem.key]?.html;
+
+ if (!contentHtml) {
+ return null; // Don't show empty sections to candidates
+ }
+
+ // In preview mode with expandedSections, control accordion state
+ const shouldExpand = expandedSections?.has(faqItem.key);
+
+ return (
+
+ );
+ })}
+ {faqItem.title}}
+ isOpen={shouldExpand || undefined}
>
- {faqItem.title}}
- >
-
-
-
- );
- })
- )}
+ />
+
+
-
+
+
(
+ EditPreviewTab.Edit,
+ );
+ const [expandedSections, setExpandedSections] = useState<
+ Set
+ >(new Set());
+
+ const { data: opportunity, isLoading } = useQuery(
+ opportunityByIdOptions({ id: opportunityId }),
+ );
+
+ // Save mutation for unified form data
+ const { mutateAsync: saveOpportunity, isPending: isSaving } = useMutation({
+ mutationFn: async (payload: ReturnType) =>
+ gqlClient.request<{ editOpportunity: Opportunity }>(
+ EDIT_OPPORTUNITY_MUTATION,
+ {
+ id: opportunityId,
+ payload,
+ },
+ ),
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: generateQueryKey(RequestKey.Opportunity, null, opportunityId),
+ });
+ },
+ });
+
+ const onSuccess = useCallback(async () => {
+ await router.push(`${webappUrl}recruiter/${opportunityId}/matches`);
+ }, [router, opportunityId]);
+
+ const onValidationError = useCallback(
+ async ({
+ issues,
+ }: {
+ issues: Array<{ path: PropertyKey[]; message: string }>;
+ }) => {
+ await showPrompt({
+ title: labels.opportunity.requiredMissingNotice.title,
+ description: (
+ ;
+
+ await onValidationError({
+ issues: apiError.extensions.issues,
+ });
+
+ return;
+ }
+
+ displayToast(
+ error.response?.errors?.[0]?.message || labels.error.generic,
+ );
+ },
+ });
+
+ // Initialize form with opportunity data
+ const { form, isDirty } = useOpportunityEditForm({
+ opportunity,
+ });
+
+ // Watch form values for real-time preview
+ const formValues = useWatch({
+ control: form.control,
+ }) as OpportunitySideBySideEditFormData;
+
+ // Convert form data to preview opportunity for real-time updates
+ const previewData = useMemo(() => {
+ if (!formValues) {
+ return undefined;
+ }
+ return formDataToPreviewOpportunity(formValues);
+ }, [formValues]);
+
+ // Scroll sync between edit panel and preview
+ const { scrollToSection } = useScrollSync({
+ offset: 20,
+ behavior: 'smooth',
+ });
+
+ const handleSectionFocus = useCallback(
+ (sectionId: string) => {
+ scrollToSection(sectionId as ScrollSyncSection);
+ // Also expand the section in the preview (without closing others)
+ setExpandedSections((prev) => {
+ const next = new Set(prev);
+ next.add(sectionId as ContentSectionType);
+ return next;
+ });
+ },
+ [scrollToSection],
+ );
+
+ // Exit confirmation when navigating away with unsaved changes
+ useExitConfirmation({
+ message: 'You have unsaved changes. Leave anyway?',
+ onValidateAction: useCallback(() => !isDirty, [isDirty]),
+ });
+
+ // Save handler with mutation
+ const handleSave = useCallback(async () => {
+ const isValid = await form.trigger();
+ if (!isValid) {
+ displayToast('Please complete all required fields');
+ return;
+ }
+
+ try {
+ const formData = form.getValues();
+ const payload = formDataToMutationPayload(formData);
+ await saveOpportunity(payload);
+
+ form.reset(formData); // Reset dirty state after successful save
+
+ // Update opportunity state to IN_REVIEW and redirect
+ await updateOpportunityState({
+ id: opportunityId,
+ state: OpportunityState.IN_REVIEW,
+ });
+ } catch (error) {
+ displayToast('Failed to save changes. Please try again.');
+ }
+ }, [
+ form,
+ displayToast,
+ saveOpportunity,
+ updateOpportunityState,
+ opportunityId,
+ ]);
+
+ const handleUpdateFromUrl = useCallback(() => {
+ openModal({
+ type: LazyModal.OpportunityReimport,
+ props: {
+ opportunityId,
+ },
+ });
+ }, [openModal, opportunityId]);
+
+ const getSaveButtonText = () => {
+ if (isSaving || isPendingOpportunityState) {
+ return 'Submitting...';
+ }
+ return 'Submit for review';
+ };
+
+ const isSaveDisabled = isSaving || isPendingOpportunityState;
+
+ if (isLoading || !opportunity) {
+ return (
+
+
+ );
+ }
+
+ // Mobile: tabbed layout
+ return (
+
+
+ );
+}
+
+function EditPage(): ReactElement {
+ return
+ {getLayout(page)}
+
+ );
+};
+
+EditPage.getLayout = GetPageLayout;
+
+export default EditPage;
diff --git a/packages/webapp/pages/recruiter/[opportunityId]/payment.tsx b/packages/webapp/pages/recruiter/[opportunityId]/payment.tsx
index e93af2d165..5e0268250c 100644
--- a/packages/webapp/pages/recruiter/[opportunityId]/payment.tsx
+++ b/packages/webapp/pages/recruiter/[opportunityId]/payment.tsx
@@ -103,7 +103,7 @@ const RecruiterPaymentPage = (): ReactElement => {
/>
(
+ EditPreviewTab.Edit,
+ );
- const { data: opportunity } = useQuery(
+ const { data: opportunity, isLoading } = useQuery(
opportunityByIdOptions({ id: opportunityId }),
);
@@ -50,13 +97,89 @@ function PreparePage(): ReactElement {
}),
);
+ // Save mutation for unified form data
+ const { mutateAsync: saveOpportunity, isPending: isSaving } = useMutation({
+ mutationFn: async (payload: ReturnType) =>
+ gqlClient.request<{ editOpportunity: Opportunity }>(
+ EDIT_OPPORTUNITY_MUTATION,
+ {
+ id: opportunityId,
+ payload,
+ },
+ ),
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: generateQueryKey(RequestKey.Opportunity, null, opportunityId),
+ });
+ },
+ });
+
+ // Initialize form with opportunity data
+ const { form, isDirty } = useOpportunityEditForm({
+ opportunity,
+ });
+
+ // Watch form values for real-time preview
+ const formValues = useWatch({
+ control: form.control,
+ }) as OpportunitySideBySideEditFormData;
+
+ // Convert form data to preview opportunity for real-time updates
+ const previewData = useMemo(() => {
+ if (!formValues) {
+ return undefined;
+ }
+ return formDataToPreviewOpportunity(formValues);
+ }, [formValues]);
+
+ // Scroll sync between edit panel and preview
+ const { scrollToSection } = useScrollSync({
+ offset: 20,
+ behavior: 'smooth',
+ });
+
+ const handleSectionFocus = useCallback(
+ (sectionId: string) => {
+ scrollToSection(sectionId as ScrollSyncSection);
+ },
+ [scrollToSection],
+ );
+
+ // Exit confirmation when navigating away with unsaved changes
+ useExitConfirmation({
+ message: 'You have unsaved changes. Leave anyway?',
+ onValidateAction: useCallback(() => !isDirty, [isDirty]),
+ });
+
+ // Save handler
+ const handleSave = useCallback(async () => {
+ const isValid = await form.trigger();
+ if (!isValid) {
+ displayToast('Please complete all required fields');
+ return false;
+ }
+
+ try {
+ const formData = form.getValues();
+ const payload = formDataToMutationPayload(formData);
+ await saveOpportunity(payload);
+
+ displayToast('Changes saved');
+ form.reset(formData);
+ return true;
+ } catch (error) {
+ displayToast('Failed to save changes. Please try again.');
+ return false;
+ }
+ }, [form, displayToast, saveOpportunity]);
+
const goToNextStep = async () => {
await router.push(`${webappUrl}recruiter/${opportunityId}/questions`);
};
const {
mutate: onSubmit,
- isPending,
+ isPending: isSubmitting,
isSuccess,
} = useMutation({
...recommendOpportunityScreeningQuestionsOptions(),
@@ -66,7 +189,7 @@ function PreparePage(): ReactElement {
}
displayToast(
- 'Just a momment, generating screening questions for your job....',
+ 'Just a moment, generating screening questions for your job....',
{
subject: ToastSubject.OpportunityScreeningQuestions,
timer: 10_000,
@@ -101,7 +224,56 @@ function PreparePage(): ReactElement {
},
});
- if (isCheckingPayment) {
+ const handleNextStep = useCallback(async () => {
+ // First save any pending changes
+ if (isDirty) {
+ const saved = await handleSave();
+ if (!saved) {
+ return;
+ }
+ }
+
+ // Validate the opportunity data
+ const result = onValidateOpportunity({
+ schema: opportunityEditStep1Schema,
+ });
+
+ if (result.error) {
+ await showPrompt({
+ title: labels.opportunity.requiredMissingNotice.title,
+ description: (
+
+
+ );
+ }
+
+ // Mobile: tabbed layout
return (
-
+
+
+
+
+
+ Your potential reach
+
+
+ See how many developers match your role and what they're
+ interested in.
+
+
+
+ {labels.opportunity.requiredMissingNotice.description}
+
+ ),
+ okButton: {
+ className: '!w-full',
+ title: labels.opportunity.requiredMissingNotice.okButton,
+ },
+ cancelButton: null,
+ });
+ },
+ [showPrompt],
+ );
+
+ const {
+ mutateAsync: updateOpportunityState,
+ isPending: isPendingOpportunityState,
+ } = useMutation({
+ ...updateOpportunityStateOptions(),
+ onSuccess,
+ onError: async (error: ApiErrorResult) => {
+ if (
+ error.response?.errors?.[0]?.extensions?.code ===
+ ApiError.PaymentRequired
+ ) {
+ if (opportunity?.organization?.recruiterTotalSeats > 0) {
+ displayToast('You need more seats to publish this job.');
+
+ openModal({
+ type: LazyModal.RecruiterSeats,
+ props: {
+ opportunityId,
+ onNext: async () => {
+ await showPrompt({
+ title: labels.opportunity.assignSeat.title,
+ description: labels.opportunity.assignSeat.description,
+ okButton: {
+ title: labels.opportunity.assignSeat.okButton,
+ },
+ cancelButton: {
+ title: labels.opportunity.assignSeat.cancelButton,
+ },
+ });
+
+ await updateOpportunityState({
+ id: opportunityId,
+ state: OpportunityState.IN_REVIEW,
+ });
+
+ await onSuccess();
+ },
+ },
+ });
+ } else {
+ await router.push(`${webappUrl}recruiter/${opportunityId}/plans`);
+ }
+
+ return;
+ }
+
+ if (
+ error.response?.errors?.[0]?.extensions?.code ===
+ ApiError.ZodValidationError
+ ) {
+ const apiError = error.response
+ .errors[0] as ApiResponseError-
+ {issues.map((issue) => {
+ const path = issue.path.join('.');
+ return
- • {issue.message} ; + })} +
+
+ );
+ }
+
+ // Desktop: side-by-side layout
+ if (isLaptop) {
+ return (
+
+ {/* Header */}
+
+
+
+ {/* Main content */}
+
+
+
+
+
+
+ {form.watch('title') || opportunity.title || 'Untitled Job'}
+
+
+
+ {getOpportunityStateLabel(opportunity.state)}
+
+
+
+ }
+ >
+ Re-import
+
+
+
+
+
+ {/* Edit Panel - 1/3 width */}
+
+
+
+
+ {/* Preview Panel - 2/3 width - uses existing JobPage */}
+
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Tab switcher */}
+
+
+
+ {form.watch('title') || opportunity.title || 'Untitled'}
+
+
+
+ {getOpportunityStateLabel(opportunity.state)}
+
+
+
+
+
+ {activeTab === EditPreviewTab.Edit ? (
+
+
+
+ ) : (
+
+
+ )}
+
-
+ {labels.opportunity.requiredMissingNotice.description}
+
+ ),
+ okButton: {
+ className: '!w-full',
+ title: labels.opportunity.requiredMissingNotice.okButton,
+ },
+ cancelButton: null,
+ });
+
+ return;
+ }
+
+ onSubmit({
+ id: opportunity.id,
+ });
+ }, [
+ isDirty,
+ handleSave,
+ onValidateOpportunity,
+ showPrompt,
+ onSubmit,
+ opportunity?.id,
+ ]);
+
+ if (isCheckingPayment || isLoading || !opportunity) {
return (
-
+ {result.error.issues.map((issue) => (
+
- • {issue.message} + ))} +
+ {/* Header */}
+
+
+
+
+
+
+
+
+
+
+ This is how your candidates will see your job
+
+
+ Review your draft carefully and update any details as needed.
+
+
+
+ {/* Edit Panel - 1/3 width */}
+
+
+
+
+ {/* Preview Panel - 2/3 width */}
+
+
+
+
+
- {
- const result = onValidateOpportunity({
- schema: opportunityEditStep1Schema,
- });
-
- if (result.error) {
- await showPrompt({
- title: labels.opportunity.requiredMissingNotice.title,
- description: (
-
- {getLayout(page, layoutProps)}
+
+ {getLayout(page)}
);
};
+
PreparePage.getLayout = GetPageLayout;
export default PreparePage;
diff --git a/packages/webapp/pages/recruiter/[opportunityId]/questions.tsx b/packages/webapp/pages/recruiter/[opportunityId]/questions.tsx
index 4447d4b874..94521ee26d 100644
--- a/packages/webapp/pages/recruiter/[opportunityId]/questions.tsx
+++ b/packages/webapp/pages/recruiter/[opportunityId]/questions.tsx
@@ -1,7 +1,6 @@
import React from 'react';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
-import type { NextSeoProps } from 'next-seo';
import { useMutation, useQuery } from '@tanstack/react-query';
import {
Typography,
@@ -10,7 +9,7 @@ import {
TypographyType,
} from '@dailydotdev/shared/src/components/typography/Typography';
-import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
+import { MoveToIcon, PlusIcon } from '@dailydotdev/shared/src/components/icons';
import { useRouter } from 'next/router';
import { opportunityByIdOptions } from '@dailydotdev/shared/src/features/opportunity/queries';
@@ -28,8 +27,11 @@ import {
ButtonVariant,
} from '@dailydotdev/shared/src/components/buttons/common';
import { LazyModal } from '@dailydotdev/shared/src/components/modals/common/types';
-import { Button } from '@dailydotdev/shared/src/components/buttons/Button';
-import { RecruiterHeader } from '@dailydotdev/shared/src/components/recruiter/Header';
+import {
+ Button,
+ ButtonColor,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import HeaderLogo from '@dailydotdev/shared/src/components/layout/HeaderLogo';
import { opportunityEditStep2Schema } from '@dailydotdev/shared/src/lib/schema/opportunity';
import { usePrompt } from '@dailydotdev/shared/src/hooks/usePrompt';
import { labels } from '@dailydotdev/shared/src/lib/labels';
@@ -49,20 +51,7 @@ import { useToastNotification } from '@dailydotdev/shared/src/hooks/useToastNoti
import { OpportunityState } from '@dailydotdev/shared/src/features/opportunity/protobuf/opportunity';
import { useRequirePayment } from '@dailydotdev/shared/src/features/opportunity/hooks/useRequirePayment';
import { Loader } from '@dailydotdev/shared/src/components/Loader';
-import { getLayout } from '../../../components/layouts/RecruiterSelfServeLayout';
-import {
- defaultOpenGraph,
- defaultSeo,
- defaultSeoTitle,
-} from '../../../next-seo';
-
-const seo: NextSeoProps = {
- title: defaultSeoTitle,
- openGraph: { ...defaultOpenGraph },
- ...defaultSeo,
- nofollow: true,
- noindex: true,
-};
+import { getLayout } from '../../../components/layouts/RecruiterFullscreenLayout';
const QuestionsSetupPage = (): ReactElement => {
const { isLoggedIn, isAuthReady } = useAuthContext();
@@ -190,46 +179,56 @@ const QuestionsSetupPage = (): ReactElement => {
return
-
- {labels.opportunity.requiredMissingNotice.description}
-
-
- ),
- okButton: {
- className: '!w-full',
- title: labels.opportunity.requiredMissingNotice.okButton,
- },
- cancelButton: null,
- });
-
- return;
- }
-
- onSubmit({
- id: opportunity.id,
- });
- },
- loading: isPending || isSuccess,
- }}
- />
- -
- {result.error.issues.map((issue) => (
-
- • {issue.message} - ))} -
-
+
+
);
}
-const GetPageLayout: typeof getLayout = (page, layoutProps) => {
+function PreparePage(): ReactElement {
+ return
+ {/* Header */}
+
+
+
+
-
+
+
+
+
+
+ This is how your candidates will see your job
+
+
+ Review your draft carefully and update any details as needed.
+
+
+
+ {activeTab === EditPreviewTab.Edit ? (
+
+
+ ) : (
+
+
+ )}
+
- {
- const result = onValidateOpportunity({
- schema: opportunityEditStep2Schema,
- });
-
- if (result.error) {
- await onValidationError({ issues: result.error.issues });
-
- return;
- }
-
- await updateOpportunityState({
- id: opportunity.id,
- state: OpportunityState.IN_REVIEW,
- });
- },
- disabled: isPendingOpportunityState,
- }}
- />
+ {/* Header */}
+
+
+
+
+
+
+
+
+ Screening Questions
+
+
+ Questions candidates will answer before you connect.
+
+
+
-
-
- Screening Questions
-
-
- AI generated questions to help you quickly assess candidate fit
- before moving forward. You can edit, replace, or remove them to
- match your hiring needs
-
-
{opportunity.questions.map((question, index) => {
@@ -314,19 +313,22 @@ const QuestionsSetupPage = (): ReactElement => {
);
};
-const GetPageLayout: typeof getLayout = (page, layoutProps) => {
+const GetPageLayout = (page: ReactNode): ReactNode => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
const router = useRouter();
const { opportunityId } = router.query;
return (
- {getLayout(page, {
- ...layoutProps,
- seo,
- })}
+ {getLayout(page)}
);
};
+
QuestionsSetupPage.getLayout = GetPageLayout;
+export async function getServerSideProps() {
+ return { props: {} };
+}
+
export default QuestionsSetupPage;
diff --git a/packages/webapp/pages/recruiter/review/index.tsx b/packages/webapp/pages/recruiter/review/index.tsx
index 2a0a7a5ab2..529532b6d1 100644
--- a/packages/webapp/pages/recruiter/review/index.tsx
+++ b/packages/webapp/pages/recruiter/review/index.tsx
@@ -112,7 +112,7 @@ const ReviewListPage = (): ReactElement => {
Job Review Queue
- Review and approve job descriptions before they go live
+ Review and approve job postings before they go live