refactor: reorganize settings navigation labels

packages/webapp/components/layouts/SettingsLayout/Security/index.tsx

@@ -151,7 +151,7 @@ function AccountSecurityDefault({
   };
 
   return (
-    <AccountPageContainer title="Account access">
+    <AccountPageContainer title="Account & Security">
       <AccountContentSection
         className={{ heading: 'mt-0' }}
         title="Email"

packages/webapp/pages/settings/composition.tsx

@@ -19,16 +19,16 @@ import { getPageSeoTitles } from '../../components/layouts/utils';
 
 const defaultWriteTabs: RadioItemProps[] = Object.keys(WriteFormTab).map(
   (key) => ({
-    label: WriteFormTab[key],
+    label: WriteFormTab[key as keyof typeof WriteFormTab],
     value: key,
   }),
 );
 
-const AccountManageSubscriptionPage = (): ReactElement => {
+const PostingSettingsPage = (): ReactElement => {
   const { updateFlag, flags } = useSettingsContext();
 
   return (
-    <AccountPageContainer title="Composition">
+    <AccountPageContainer title="Posting">
       <div id="compose" aria-hidden />
       <FlexCol className="gap-2">
         <Typography bold type={TypographyType.Subhead}>
@@ -38,7 +38,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
         <Radio
           name="default-write-tab"
           options={defaultWriteTabs}
-          value={flags.defaultWriteTab}
+          value={flags?.defaultWriteTab}
           onChange={(value) => {
             updateFlag('defaultWriteTab', value);
           }}
@@ -56,10 +56,10 @@ const AccountManageSubscriptionPage = (): ReactElement => {
 
 const seo: NextSeoProps = {
   ...defaultSeo,
-  ...getPageSeoTitles('Appearance'),
+  ...getPageSeoTitles('Posting'),
 };
 
-AccountManageSubscriptionPage.getLayout = getSettingsLayout;
-AccountManageSubscriptionPage.layoutProps = { seo };
+PostingSettingsPage.getLayout = getSettingsLayout;
+PostingSettingsPage.layoutProps = { seo };
 
-export default AccountManageSubscriptionPage;
+export default PostingSettingsPage;

packages/webapp/pages/settings/customization/devcard.tsx

@@ -26,7 +26,7 @@ const DevCardStep2 = dynamic(() =>
   ).then((mod) => mod.DevCardStep2),
 );
 
-const seoTitles = getPageSeoTitles('Grab your DevCard');
+const seoTitles = getPageSeoTitles('DevCard');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   description:

packages/webapp/pages/settings/customization/gamification.tsx

@@ -7,7 +7,6 @@ import { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
 import { questsFeature } from '@dailydotdev/shared/src/lib/featureManagement';
 import {
   Typography,
-  TypographyColor,
   TypographyType,
 } from '@dailydotdev/shared/src/components/typography/Typography';
 import { AccountPageContainer } from '../../../components/layouts/SettingsLayout/AccountPageContainer';
@@ -42,7 +41,7 @@ const GamificationSettingsPage = (): ReactElement | null => {
   }
 
   return (
-    <AccountPageContainer title="Gamification">
+    <AccountPageContainer title="Feature visibility">
       <div className="flex flex-col gap-6">
         <section className="flex flex-col gap-2">
           <Typography bold type={TypographyType.Subhead}>
@@ -61,25 +60,16 @@ const GamificationSettingsPage = (): ReactElement | null => {
         </section>
 
         <section className="flex flex-col gap-2">
-          <div className="flex flex-col gap-1">
-            <Typography bold type={TypographyType.Subhead}>
-              Show quests
-            </Typography>
-
-            <Typography
-              type={TypographyType.Callout}
-              color={TypographyColor.Tertiary}
-            >
-              Turn quest UI on or off across the product.
-            </Typography>
-          </div>
+          <Typography bold type={TypographyType.Subhead}>
+            Show quests
+          </Typography>
 
           <SettingsSwitch
             name="quest-system"
             checked={!optOutQuestSystem}
             onToggle={toggleOptOutQuestSystem}
           >
-            Toggle to display or hide the quest system UI.
+            Toggle to display or hide the quest system UI across the product.
           </SettingsSwitch>
         </section>
       </div>
@@ -89,7 +79,7 @@ const GamificationSettingsPage = (): ReactElement | null => {
 
 const seo: NextSeoProps = {
   ...defaultSeo,
-  title: getTemplatedTitle('Gamification'),
+  title: getTemplatedTitle('Feature visibility'),
 };
 
 GamificationSettingsPage.getLayout = getSettingsLayout;

packages/webapp/pages/settings/customization/integrations.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import React, { useCallback, useState } from 'react';
+import type { NextSeoProps } from 'next-seo';
 
 import { useIntegrationsQuery } from '@dailydotdev/shared/src/hooks/integrations/useIntegrationsQuery';
 
@@ -16,6 +17,13 @@ import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { LogEvent, Origin } from '@dailydotdev/shared/src/lib/log';
 import { getSettingsLayout } from '../../../components/layouts/SettingsLayout';
 import { AccountPageContainer } from '../../../components/layouts/SettingsLayout/AccountPageContainer';
+import { defaultSeo } from '../../../next-seo';
+import { getPageSeoTitles } from '../../../components/layouts/utils';
+
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  ...getPageSeoTitles('Integrations'),
+};
 
 const AccountIntegrationsPage = (): ReactElement => {
   const [state, setState] = useState<{
@@ -84,5 +92,6 @@ const AccountIntegrationsPage = (): ReactElement => {
 };
 
 AccountIntegrationsPage.getLayout = getSettingsLayout;
+AccountIntegrationsPage.layoutProps = { seo };
 
 export default AccountIntegrationsPage;

packages/webapp/pages/settings/feed/ai.tsx

@@ -18,7 +18,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
   );
 };
 
-const seoTitles = getPageSeoTitles('Edit AI superpowers');
+const seoTitles = getPageSeoTitles('AI superpowers');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },

packages/webapp/pages/settings/feed/blocked.tsx

@@ -18,7 +18,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
   );
 };
 
-const seoTitles = getPageSeoTitles('Edit blocked content');
+const seoTitles = getPageSeoTitles('Blocked content');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },

packages/webapp/pages/settings/feed/general.tsx

@@ -18,7 +18,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
   );
 };
 
-const seoTitles = getPageSeoTitles('Edit feed');
+const seoTitles = getPageSeoTitles('General');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },

packages/webapp/pages/settings/feed/preferences.tsx

@@ -18,7 +18,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
   );
 };
 
-const seoTitles = getPageSeoTitles('Edit content preferences');
+const seoTitles = getPageSeoTitles('Content preferences');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },

packages/webapp/pages/settings/feed/sources.tsx

@@ -18,7 +18,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
   );
 };
 
-const seoTitles = getPageSeoTitles('Edit content sources');
+const seoTitles = getPageSeoTitles('Content sources');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },

packages/webapp/pages/settings/feed/tags.tsx

@@ -18,7 +18,7 @@ const AccountManageSubscriptionPage = (): ReactElement => {
   );
 };
 
-const seoTitles = getPageSeoTitles('Edit tags');
+const seoTitles = getPageSeoTitles('Tags');
 const seo: NextSeoProps = {
   title: seoTitles.title,
   openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },

packages/webapp/pages/settings/invite.tsx

@@ -55,7 +55,10 @@ import { getSettingsLayout } from '../../components/layouts/SettingsLayout';
 import { defaultSeo } from '../../next-seo';
 import { getPageSeoTitles } from '../../components/layouts/utils';
 
-const seo: NextSeoProps = { ...defaultSeo, ...getPageSeoTitles('Invite') };
+const seo: NextSeoProps = {
+  ...defaultSeo,
+  ...getPageSeoTitles('Invite Friends'),
+};
 
 const AccountInvitePage = (): ReactElement => {
   const { openModal } = useLazyModal();
@@ -88,10 +91,10 @@ const AccountInvitePage = (): ReactElement => {
       getNextPageParam(referredUsers?.pageInfo),
   });
   const users: UserShortProfile[] = useMemo(() => {
-    const list = [];
+    const list: UserShortProfile[] = [];
     usersResult.data?.pages.forEach((page) => {
       page?.referredUsers.edges.forEach(({ node }) => {
-        list.push(node);
+        list.push(node as UserShortProfile);
       });
     }, []);
 

packages/webapp/pages/settings/job-preferences.tsx

@@ -61,7 +61,7 @@ import { AccountPageContainer } from '../../components/layouts/SettingsLayout/Ac
 
 const seo: NextSeoProps = {
   ...defaultSeo,
-  ...getPageSeoTitles('Manage job preferences'),
+  ...getPageSeoTitles('Job preferences'),
 };
 
 const options = [
@@ -84,9 +84,9 @@ const JobPreferencesPage = (): ReactElement => {
   const { user } = useAuthContext();
   const { displayToast } = useToastNotification();
   const { completeAction } = useActions();
-  const [option, setOption] = useState(null);
+  const [option, setOption] = useState<CandidateStatus | null>(null);
 
-  const opts = getCandidatePreferencesOptions(user?.id);
+  const opts = getCandidatePreferencesOptions(user?.id ?? '');
   const updateQuery = useUpdateQuery(opts);
 
   const { data: preferences, isPending } = useQuery(opts);
@@ -282,7 +282,7 @@ const JobPreferencesPage = (): ReactElement => {
 };
 
 export const getStaticProps: GetStaticProps<{
-  dehydratedState: DehydratedState;
+  dehydratedState: DehydratedState | null;
 }> = async () => {
   const queryClient = new QueryClient();
   try {

packages/webapp/pages/settings/notifications.tsx

@@ -16,7 +16,7 @@ import { AccountPageContent } from '../../components/layouts/SettingsLayout/comm
 
 const seo: NextSeoProps = {
   ...defaultSeo,
-  ...getPageSeoTitles('Manage account notifications'),
+  ...getPageSeoTitles('Notifications'),
 };
 
 const AccountNotificationsPage = (): ReactElement => {

packages/webapp/pages/settings/organization/[orgId]/billing.tsx

@@ -31,7 +31,7 @@ import { defaultSeo } from '../../../../next-seo';
 import { getPageSeoTitles } from '../../../../components/layouts/utils';
 import { getOrganizationLayout } from '../../../../components/layouts/OrganizationLayout';
 
-const Page = (): ReactElement => {
+const Page = (): ReactElement | null => {
   const router = useRouter();
   const { openModal } = useLazyModal();
   const organizationId = router.query.orgId as string;
@@ -56,7 +56,7 @@ const Page = (): ReactElement => {
     setData(origData);
   }, [origData, data]);
 
-  if (isFetching || !isAuthReady) {
+  if (isFetching || !isAuthReady || !organization) {
     return null;
   }
 
@@ -68,7 +68,7 @@ const Page = (): ReactElement => {
         section: 'flex-1 gap-6',
       }}
     >
-      {data && (
+      {data && pricing && data.total && pricing.price?.monthly && (
         <>
           <section>
             <Typography bold type={TypographyType.Body} className="pb-4">
@@ -158,7 +158,7 @@ const Page = (): ReactElement => {
                   {new Intl.NumberFormat(navigator.language, {
                     style: 'currency',
                     currency: pricing.currency.code,
-                  }).format(pricing.price?.monthly?.amount)}
+                  }).format(pricing.price.monthly.amount)}
                   /seat
                 </Typography>
               </div>
@@ -200,7 +200,7 @@ const Page = (): ReactElement => {
 
 const seo: NextSeoProps = {
   ...defaultSeo,
-  ...getPageSeoTitles('Organization'),
+  ...getPageSeoTitles('Billing'),
 };
 
 Page.getLayout = getOrganizationLayout;

packages/webapp/pages/settings/organization/[orgId]/general.tsx

@@ -39,7 +39,7 @@ import { getPageSeoTitles } from '../../../../components/layouts/utils';
 import { defaultSeo } from '../../../../next-seo';
 import { AccountPageContainer } from '../../../../components/layouts/SettingsLayout/AccountPageContainer';
 
-const Page = (): ReactElement => {
+const Page = (): ReactElement | null => {
   const router = useRouter();
   const { showPrompt } = usePrompt();
   const {
@@ -72,10 +72,7 @@ const Page = (): ReactElement => {
       data.image = imageFile;
     }
 
-    await updateOrganization({
-      id: organization.id,
-      form: data,
-    });
+    await updateOrganization({ form: data });
 
     setImageChanged(false);
     return null;
@@ -98,15 +95,15 @@ const Page = (): ReactElement => {
     }
   };
 
+  if (isFetching || !organization) {
+    return null;
+  }
+
   const disableDeletion =
     !isOwner ||
     organization.status === SubscriptionStatus.Active ||
     seats.assigned > 0;
 
-  if (isFetching) {
-    return null;
-  }
-
   return (
     <AccountPageContainer
       title="General"
@@ -220,7 +217,7 @@ const Page = (): ReactElement => {
 
 const seo: NextSeoProps = {
   ...defaultSeo,
-  ...getPageSeoTitles('Organization'),
+  ...getPageSeoTitles('General'),
 };
 
 Page.getLayout = getOrganizationLayout;