v3 - reorganize company info

src/app/(main)/layout.tsx

@@ -14,6 +14,8 @@ import SkipToMain from "src/components/skipToMain/SkipToMain";
 import { LEGAL_DOCUMENTS_QUERY } from "studio/lib/queries/legalDocuments";
 import { LegalDocument } from "studio/lib/payloads/legalDocuments";
 import styles from "./layout.module.css";
+import { BRAND_ASSETS_QUERY } from "../../../studio/lib/queries/brandAssets";
+import { BrandAssets } from "../../../studio/lib/payloads/brandAssets";
 
 const hasValidData = (data: any) => data && Object.keys(data).length > 0;
 
@@ -24,13 +26,19 @@ export default async function Layout({
 }>) {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
-  const [initialNav, initialCompanyInfo, initialSoMe, initialLegal] =
-    await Promise.all([
-      loadQuery<Navigation>(NAV_QUERY, {}, { perspective }),
-      loadQuery<CompanyInfo>(COMPANY_INFO_QUERY, {}, { perspective }),
-      loadQuery<SocialMediaProfiles>(SOMEPROFILES_QUERY, {}, { perspective }),
-      loadQuery<LegalDocument[]>(LEGAL_DOCUMENTS_QUERY, {}, { perspective }),
-    ]);
+  const [
+    initialNav,
+    initialCompanyInfo,
+    initialSoMe,
+    initialLegal,
+    initialBrandAssets,
+  ] = await Promise.all([
+    loadQuery<Navigation>(NAV_QUERY, {}, { perspective }),
+    loadQuery<CompanyInfo>(COMPANY_INFO_QUERY, {}, { perspective }),
+    loadQuery<SocialMediaProfiles>(SOMEPROFILES_QUERY, {}, { perspective }),
+    loadQuery<LegalDocument[]>(LEGAL_DOCUMENTS_QUERY, {}, { perspective }),
+    loadQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
+  ]);
 
   const hasNavData = hasValidData(initialNav.data);
   const hasCompanyInfoData = hasValidData(initialCompanyInfo.data);
@@ -55,13 +63,10 @@ export default async function Layout({
       {hasHeaderData && isDraftMode ? (
         <HeaderPreview
           initialNav={initialNav}
-          initialCompanyInfo={initialCompanyInfo}
+          initialBrandAssets={initialBrandAssets}
         />
       ) : (
-        <Header
-          data={initialNav.data}
-          assets={initialCompanyInfo.data?.brandAssets}
-        />
+        <Header data={initialNav.data} assets={initialBrandAssets.data} />
       )}
       <main id="main" tabIndex={-1}>
         {children}
@@ -70,13 +75,15 @@ export default async function Layout({
         <FooterPreview
           initialNav={initialNav}
           initialCompanyInfo={initialCompanyInfo}
+          initialBrandAssets={initialBrandAssets}
           initialSoMe={initialSoMe}
         />
       ) : (
         <Footer
           navigationData={initialNav.data}
           legalData={initialLegal.data}
           companyInfo={initialCompanyInfo.data}
+          brandAssets={initialBrandAssets.data}
           soMeData={initialSoMe.data}
         />
       )}

src/app/layout.tsx

@@ -1,12 +1,11 @@
 import { Darker_Grotesque, Figtree } from "next/font/google";
 import { draftMode } from "next/headers";
 import LiveVisualEditing from "studio/lib/loaders/AutomaticVisualEditing";
-import { CompanyInfo } from "studio/lib/payloads/companyDetails";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 import { Metadata } from "next";
 import { loadQuery } from "studio/lib/store";
 import "src/styles/global.css";
 import { generateMetadataFromSeo } from "src/utils/seo";
+import { DEFAULT_LANGUAGE_QUERY } from "../../studio/lib/queries/languages";
 
 const darkerGrotesque = Darker_Grotesque({
   subsets: ["latin"],
@@ -31,8 +30,10 @@ export default async function RootLayout({
   let siteLang;
 
   try {
-    const { data } = await loadQuery<CompanyInfo>(COMPANY_INFO_QUERY);
-    siteLang = data.siteMetadata?.defaultLanguage;
+    const { data } = await loadQuery<DefaultLanguageObject>(
+      DEFAULT_LANGUAGE_QUERY,
+    );
+    siteLang = data.defaultLanguage;
   } catch (error) {
     console.error("Error loading site settings:", error);
     siteLang = "en";

src/components/navigation/footer/Footer.tsx

@@ -13,22 +13,25 @@ import SoMeLink from "src/components/link/SoMeLink";
 import { ReactNode } from "react";
 import Text from "src/components/text/Text";
 import { LegalDocument } from "studio/lib/payloads/legalDocuments";
+import { BrandAssets } from "studio/lib/payloads/brandAssets";
 
 export interface IFooter {
   navigationData: Navigation;
   companyInfo: CompanyInfo;
+  brandAssets: BrandAssets;
   soMeData: SocialMediaProfiles;
   legalData: LegalDocument[];
 }
 
 const Footer = ({
   navigationData,
   companyInfo,
+  brandAssets,
   soMeData,
   legalData,
 }: IFooter) => {
   const renderedLogo = useConvertSanityImageToNextImage(
-    companyInfo.brandAssets?.secondaryLogo,
+    brandAssets?.secondaryLogo,
   );
 
   const currentYear = new Date().getFullYear();
@@ -43,7 +46,7 @@ const Footer = ({
       <ul className={styles.credits}>
         <li key="credit-legal-key-1">
           <Text className={styles.whiteColor}>
-            {`© ${currentYear} ${companyInfo.siteMetadata?.siteName}`}
+            {`© ${currentYear} ${companyInfo.companyName}`}
           </Text>
         </li>
         {legalData?.map((legal) => {

src/components/navigation/footer/FooterPreview.tsx

@@ -7,6 +7,8 @@ import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
 import Footer from "./Footer";
 import { SocialMediaProfiles } from "studio/lib/payloads/socialMedia";
 import { SOMEPROFILES_QUERY } from "studio/lib/queries/socialMediaProfiles";
+import { BrandAssets } from "studio/lib/payloads/brandAssets";
+import { BRAND_ASSETS_QUERY } from "studio/lib/queries/brandAssets";
 
 function useInitialData<T>(
   query: string,
@@ -19,23 +21,28 @@ function useInitialData<T>(
 export default function FooterPreview({
   initialNav,
   initialCompanyInfo,
+  initialBrandAssets,
   initialSoMe,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
   initialCompanyInfo: QueryResponseInitial<CompanyInfo>;
+  initialBrandAssets: QueryResponseInitial<BrandAssets>;
   initialSoMe: QueryResponseInitial<SocialMediaProfiles>;
 }) {
   const newNav = useInitialData(NAV_QUERY, initialNav);
   const newCompanyInfo = useInitialData(COMPANY_INFO_QUERY, initialCompanyInfo);
+  const newBrandAssets = useInitialData(BRAND_ASSETS_QUERY, initialBrandAssets);
   const newSoMedata = useInitialData(SOMEPROFILES_QUERY, initialSoMe);
   // TODO: add legal preview
   return (
     newNav &&
     newCompanyInfo &&
+    newBrandAssets &&
     newSoMedata && (
       <Footer
         navigationData={newNav}
         companyInfo={newCompanyInfo}
+        brandAssets={newBrandAssets}
         soMeData={newSoMedata}
         legalData={[]}
       />

src/components/navigation/header/Header.tsx

@@ -9,10 +9,10 @@ import { linkID } from "studio/schemas/objects/link";
 import { callToActionFieldID } from "studio/schemas/fields/callToActionFields";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
-import { BrandAssets } from "studio/lib/payloads/companyDetails";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { getHref } from "src/utils/get";
+import { BrandAssets } from "../../../../studio/lib/payloads/brandAssets";
 
 export interface IHeader {
   data: Navigation;

src/components/navigation/header/HeaderPreview.tsx

@@ -3,31 +3,28 @@ import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 import { NAV_QUERY } from "studio/lib/queries/navigation";
 import { Navigation } from "studio/lib/payloads/navigation";
 import { Header } from "./Header";
-import { CompanyInfo } from "studio/lib/payloads/companyDetails";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/companyDetails";
+import { BrandAssets } from "../../../../studio/lib/payloads/brandAssets";
+import { BRAND_ASSETS_QUERY } from "../../../../studio/lib/queries/brandAssets";
 
 export default function HeaderPreview({
   initialNav,
-  initialCompanyInfo,
+  initialBrandAssets,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
-  initialCompanyInfo: QueryResponseInitial<CompanyInfo>;
+  initialBrandAssets: QueryResponseInitial<BrandAssets>;
 }) {
   const { data: newNav } = useQuery<Navigation | null>(
     NAV_QUERY,
     {},
     { initial: initialNav },
   );
-  const { data: newCompanyInfo } = useQuery<CompanyInfo | null>(
-    COMPANY_INFO_QUERY,
+  const { data: newBrandAssets } = useQuery<BrandAssets | null>(
+    BRAND_ASSETS_QUERY,
     {},
-    { initial: initialCompanyInfo },
+    { initial: initialBrandAssets },
   );
 
   return (
-    newNav &&
-    newCompanyInfo && (
-      <Header data={newNav} assets={newCompanyInfo.brandAssets} />
-    )
+    newNav && newBrandAssets && <Header data={newNav} assets={newBrandAssets} />
   );
 }

src/components/navigation/mockData.ts

@@ -110,21 +110,10 @@ export const mockNavigation: Navigation = {
 };
 
 export const mockCompanyInfo = {
-  siteMetadata: {
-    siteName: "Varaint",
-    defaultLanguage: "en",
-  },
-  brandAssets: {
-    primaryLogo: {
-      src: primaryLogoFile,
-      alt: "Primary Logo",
-    },
-    secondaryLogo: {
-      src: secondaryLogoFile,
-      alt: "Secondary Logo",
-    },
-    favicon: {},
-  },
+  companyName: "Variant",
+  organizationNumber: "",
+  companyPhone: "",
+  companyEmail: "",
 };
 
 export const mockLogo = {

src/utils/seo.ts

@@ -6,6 +6,9 @@ import { loadQuery } from "studio/lib/store";
 import { PortableTextBlock } from "src/components/richText/RichText";
 import { DEFAULT_SEO_QUERY } from "../../studio/lib/queries/seo";
 import { DefaultSeo } from "../../studio/lib/payloads/defaultSeo";
+import { BrandAssets } from "../../studio/lib/payloads/brandAssets";
+import { BRAND_ASSETS_QUERY } from "../../studio/lib/queries/brandAssets";
+import { CompanyInfo } from "../../studio/lib/payloads/companyDetails";
 
 type SeoData = {
   title: string;
@@ -21,15 +24,6 @@ type PostSeoData = {
   keywords: string;
 };
 
-type CompanyInfo = {
-  siteMetadata: {
-    siteName: string;
-  };
-  brandAssets: {
-    favicon: string;
-  };
-};
-
 export const OPEN_GRAPH_IMAGE_DIMENSIONS = {
   width: 1200,
   height: 630,
@@ -72,33 +66,28 @@ export async function fetchPostSeoData(
   }
 }
 
-export async function fetchCompanyInfo(): Promise<CompanyInfo | null> {
-  try {
-    const { data } = await loadQuery<CompanyInfo>(COMPANY_INFO_QUERY);
-    return data;
-  } catch (error) {
-    console.error("Error loading site settings:", error);
-    return null;
-  }
-}
-
 export async function generateMetadataFromSeo(
   seo: SeoData | null,
 ): Promise<Metadata> {
   const { data: defaultSeo } = await loadQuery<DefaultSeo | null>(
     DEFAULT_SEO_QUERY,
   );
-  const companyInfo = await fetchCompanyInfo();
+  const { data: companyInfo } = await loadQuery<CompanyInfo | null>(
+    COMPANY_INFO_QUERY,
+  );
+  const { data: brandAssets } = await loadQuery<BrandAssets | null>(
+    BRAND_ASSETS_QUERY,
+  );
 
   const title =
     seo?.title ||
     defaultSeo?.seo?.seoTitle ||
-    companyInfo?.siteMetadata?.siteName ||
+    companyInfo?.companyName ||
     "Variant";
   const description = seo?.description || defaultSeo?.seo?.seoDescription;
   const keywords = seo?.keywords || "";
 
-  const favicon = companyInfo?.brandAssets?.favicon;
+  const favicon = brandAssets?.favicon;
   const faviconUrl = favicon ? urlFor(favicon).url() : "";
 
   const icons = [faviconUrl ? { rel: "icon", url: faviconUrl } : null].filter(

studio/components/stringInputWithCharacterCount/StringInputWithCharacterCount.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Box, Stack, Text } from "@sanity/ui";
 import { StringInputProps } from "sanity";
 import styles from "./stringInputWithCharacterCount.module.css";

studio/lib/payloads/brandAssets.ts

@@ -0,0 +1,7 @@
+import { IImage } from "./media";
+
+export interface BrandAssets {
+  primaryLogo: IImage;
+  secondaryLogo: IImage;
+  favicon: IImage;
+}

studio/lib/payloads/companyDetails.ts

@@ -1,19 +1,8 @@
-import { IImage } from "./media";
-
 export interface CompanyInfo {
-  brandAssets: BrandAssets;
-  siteMetadata: SiteMetadata;
-}
-
-export interface BrandAssets {
-  primaryLogo: IImage;
-  secondaryLogo: IImage;
-  favicon: IImage;
-}
-
-interface SiteMetadata {
-  siteName: string;
-  defaultLanguage: string;
+  companyName: string;
+  organizationNumber: string;
+  companyPhone: string;
+  companyEmail: string;
 }
 
 export interface CompanyLocation {

studio/lib/payloads/languages.ts

@@ -0,0 +1,3 @@
+interface DefaultLanguageObject {
+  defaultLanguage: string;
+}

studio/lib/queries/brandAssets.ts

@@ -0,0 +1,6 @@
+import { groq } from "next-sanity";
+import { brandAssetsID } from "../../schemas/documents/brandAssets";
+
+export const BRAND_ASSETS_QUERY = groq`
+  *[_type == "${brandAssetsID}" && _id == "${brandAssetsID}"][0]
+`;

studio/lib/queries/companyDetails.ts

@@ -1,9 +1,6 @@
 import { groq } from "next-sanity";
+import { companyInfoID } from "../../schemas/documents/companyInfo";
 
-export const COMPANY_INFO_QUERY = groq`*[_type == "companyInfo"]{
-    brandAssets,
-    siteMetadata,
-    legalPages,
-}[0]`;
+export const COMPANY_INFO_QUERY = groq`*[_type == "${companyInfoID}"][0]`;
 
 export const COMPANY_LOCATIONS_QUERY = groq`*[_type == "companyLocation"]`;

studio/lib/queries/languages.ts

@@ -0,0 +1,6 @@
+import { groq } from "next-sanity";
+import { supportedLanguagesID } from "../../schemas/documents/supportedLanguages";
+
+export const DEFAULT_LANGUAGE_QUERY = groq`*[_type == "${supportedLanguagesID}" && _id == "${supportedLanguagesID}"][0] {
+    "defaultLanguage": languages[isDefault == true][0].language
+}`;

studio/schema.ts

@@ -17,6 +17,7 @@ import redirect from "./schemas/documents/redirect";
 import benefitsByLocation from "./schemas/objects/compensations/benefitsByLocation";
 import supportedLanguages from "./schemas/documents/supportedLanguages";
 import defaultSeo from "./schemas/documents/admin/defaultSeo";
+import brandAssets from "./schemas/documents/brandAssets";
 
 export const schema: { types: SchemaTypeDefinition[] } = {
   types: [
@@ -38,5 +39,6 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     companyLocation,
     supportedLanguages,
     defaultSeo,
+    brandAssets,
   ],
 };