🐛 Fix presentation tool links #3749 (#3766)

* 🎨 presentation tool and some preview fixes in web

* 🎨 use default web language if present

* 🎨 cleanup

Author: BorghildSelle

studio/languages.ts

@@ -1,6 +1,12 @@
-import { getLanguages } from '@energyvision/shared/satelliteConfig'
+import {
+  defaultWebLanguage,
+  getLanguages,
+} from '@energyvision/shared/satelliteConfig'
 import { dataset } from './sanity.client'
 
 export const languages = getLanguages(dataset)
 
 export const defaultLanguage = languages[0]
+export const defaultWebLang = languages?.find(
+  lang => lang.id === (defaultWebLanguage[dataset] ?? defaultLanguage.id),
+)

studio/presentation/locations.ts

@@ -3,6 +3,7 @@ import { getDraftId } from 'sanity'
 import type { DocumentLocationResolver } from 'sanity/presentation'
 import blocksToText from '@/helpers/blocksToText'
 import { capitalizeFirstLetter } from '@/helpers/formatters'
+import { defaultWebLang } from '@/languages'
 import { getIdFromName, getLocaleFromName } from '../src/lib/localization'
 
 export const locations: DocumentLocationResolver = (params, context) => {
@@ -16,26 +17,35 @@ export const locations: DocumentLocationResolver = (params, context) => {
     'localNews',
   ]
 
-  if (routePages?.includes(params.type)) {
+  if (params.type === 'homePage') {
     query = {
       fetch: `*[_id==$id][0]{
-      "slugs": *[_type match "route*" && references(^._id)].slug.current,
+      lang,
+      "isActive": count(
+        *[_type match "route_homepage" && (
+          references(
+            *[_type == "translation.metadata" && references($id)][0]
+              .translations[_key == $defaultLang][0].value._ref
+          ) || references($id)
+        )]
+      ) > 0,
       "translationSlugs": *[_type == "translation.metadata" && references(^._id)].translations[].value->{
-      "slug" : *[_type match "route*" && references(^._id)][0].slug.current, 
       lang,
-      title,
       },
       ...
       }
       `,
       listen: `*[_id in [$id,$draftId]]`,
     }
-  } else if (params.type === 'homePage') {
+  } else if (routePages?.includes(params.type)) {
     query = {
       fetch: `*[_id==$id][0]{
-      "isActive": count(*[_type match "route_homepage" && references(^._id)]) > 0,
+      lang,
+      "slugs": *[_type match "route*" && references(^._id)].slug.current,
       "translationSlugs": *[_type == "translation.metadata" && references(^._id)].translations[].value->{
+      "slug" : *[_type match "route*" && references(^._id)][0].slug.current, 
       lang,
+      title,
       },
       ...
       }
@@ -46,6 +56,7 @@ export const locations: DocumentLocationResolver = (params, context) => {
     //pages with slugs on them
     query = {
       fetch: `*[_id==$id][0]{
+      lang,
       "slugs": *[_type match "route*" && references(^._id)][0].slug.current,
     "translationSlugs": *[_type == "translation.metadata" && references(^._id)].translations[].value->{
       "slug": slug.current,
@@ -58,10 +69,16 @@ export const locations: DocumentLocationResolver = (params, context) => {
   }
 
   if (query) {
-    const pageParams = { id: params.id, draftId: getDraftId(params.id) }
+    const pageParams = {
+      id: params.id,
+      draftId: getDraftId(params.id),
+      publishedId: params.id.replace(/^drafts\./, ''),
+      defaultLang: defaultWebLang?.name,
+    }
 
     const doc$ = context.documentStore.listenQuery(
       query,
+      //@ts-ignore
       pageParams,
       { perspective: 'drafts' }, // returns a draft article if it exists
     )
@@ -71,10 +88,8 @@ export const locations: DocumentLocationResolver = (params, context) => {
       map(doc => {
         // If the document doesn't exist or have a slug, return null
         if (!doc || (doc?._type === 'homePage' && !doc?.isActive)) {
-          console.log('return no locations')
           return null
         }
-
         let locs = []
         if (routePages?.includes(params.type)) {
           if (
@@ -91,7 +106,7 @@ export const locations: DocumentLocationResolver = (params, context) => {
                 const locale = getLocaleFromName(translation?.lang)
                 return {
                   title: `${blocksToText(translation?.title)}`,
-                  href: `${translation?.lang !== 'en_GB' ? `${locale}` : ''}${translation?.slug}`,
+                  href: `${translation?.lang !== defaultWebLang?.name ? `${locale}` : ''}${translation?.slug}`,
                 }
               })
           } else if (doc?.slugs?.filter((slug: string) => slug)?.length > 0) {
@@ -101,7 +116,7 @@ export const locations: DocumentLocationResolver = (params, context) => {
                 const locale = getLocaleFromName(doc?.lang)
                 return {
                   title: `${blocksToText(doc?.title)}`,
-                  href: `${doc?.lang !== 'en_GB' ? `${locale}` : ''}${slug}`,
+                  href: `${doc?.lang !== defaultWebLang?.name ? `${locale}` : ''}${slug}`,
                 }
               })
           } else {
@@ -113,17 +128,32 @@ export const locations: DocumentLocationResolver = (params, context) => {
             ]
           }
         } else if (doc?._type === 'homePage' && doc?.isActive) {
-          locs = doc?.translationSlugs?.map((item: any) => {
-            const itemLocale = getLocaleFromName(item?.lang)
-            const localeId = capitalizeFirstLetter(getIdFromName(item?.lang))
-
-            return {
-              title: `${localeId} homepage`,
-              href: `${item?.lang !== 'en_GB' ? `/${itemLocale}` : '/'}`,
-            }
-          })
+          if (!doc?.translationSlugs || doc?.translationSlugs?.length === 0) {
+            const localeId = capitalizeFirstLetter(
+              getIdFromName(defaultWebLang?.name),
+            )
+            locs = [
+              {
+                title: `${localeId} homepage`,
+                href: `/`,
+              },
+            ]
+          }
+          if (doc?.translationSlugs?.length > 0) {
+            locs = doc?.translationSlugs
+              ?.filter((item: any) => item?.lang === doc?.lang)
+              ?.map((item: any) => {
+                const itemLocale = getLocaleFromName(item?.lang)
+                const localeId = capitalizeFirstLetter(
+                  getIdFromName(item?.lang),
+                )
+                return {
+                  title: `${localeId} homepage`,
+                  href: `${item?.lang !== defaultWebLang?.name ? `/${itemLocale}` : '/'}`,
+                }
+              })
+          }
         } else if (pagesWithSlugOnThem?.includes(params.type)) {
-          console.log('pagesWithSlugOnThem')
           const locale = getLocaleFromName(doc?.lang)
           const plainTitle = Array.isArray(doc.title)
             ? blocksToText(doc.title)
@@ -132,7 +162,7 @@ export const locations: DocumentLocationResolver = (params, context) => {
           locs = [
             {
               title: doc.title ? plainTitle : 'Untitled',
-              href: `${doc?.lang !== 'en_GB' ? `${locale}/` : ''}${doc?.slug?.current}`,
+              href: `${doc?.lang !== defaultWebLang?.name ? `${locale}/` : ''}${doc?.slug?.current}`,
             },
           ]
         }

web/app/[locale]/FriendlyCaptchaWrapper.tsx

@@ -1,5 +1,4 @@
 'use client'
-import { FriendlyCaptchaSDK } from '@friendlycaptcha/sdk'
 import { type ReactNode, useCallback, useState } from 'react'
 import { FriendlyCaptchaContextProvider } from '@/contexts/FriendlyCaptchaContext'
 

web/app/[locale]/layout.tsx

@@ -8,7 +8,6 @@ import Script from 'next/script'
 import { hasLocale, NextIntlClientProvider } from 'next-intl'
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { PageProvider } from '@/contexts/pageContext'
-import { dataset } from '@/languageConfig'
 import { getLocaleFromIso, getNameFromIso } from '@/sanity/helpers/localization'
 import { routeSanityFetch, SanityLive } from '@/sanity/lib/live'
 import { footerAndErrorImageQuery } from '@/sanity/queries/footer'
@@ -65,7 +64,7 @@ export default async function LocaleLayout({
   const { errorImage, ...footerData } = footerAndErrorImageData || {}
 
   async function loadVisualEditing() {
-    if (dataset === 'global-development' && (await draftMode()).isEnabled) {
+    if ((await draftMode()).isEnabled) {
       const DraftModeToolbar = dynamic(
         () => import('@/sections/DraftMode/DraftModeToolbar'),
       )

web/core/Carousel/Carousel.tsx

@@ -323,6 +323,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(
           aspectRatio={'16:9'}
           height={iframeData?.height}
           hasSectionTitle={!!title}
+          className='my-20'
         />
       )
 

web/core/IFrame/IFrame.tsx

@@ -50,6 +50,10 @@ const isIframeAllowedByCsp = (url: string) => {
   }
 }
 
+const isDraftModeEnabled = () =>
+  typeof document !== 'undefined' &&
+  document.cookie.includes('__prerender_bypass=')
+
 type IFrameProps = {
   frameTitle: string
   url: string
@@ -93,7 +97,8 @@ export const IFrame = forwardRef<HTMLDivElement, IFrameProps>(function IFrame(
   },
   ref,
 ) {
-  const isPreview = useIsPresentationTool()
+  const isPresentationTool = useIsPresentationTool()
+  const isPreview = isPresentationTool || isDraftModeEnabled()
   const [consented, setConsented] = useState(useConsent(cookiePolicy))
   const titleId = useId()
   const descriptionId = useId()
@@ -191,21 +196,17 @@ export const IFrame = forwardRef<HTMLDivElement, IFrameProps>(function IFrame(
     </>
   )
 
-  if (isPreview) {
-    return iframeElement
-  }
-
   return (
-    <section ref={ref} className={twMerge('my-20 h-min', className)}>
-      {consented ? (
+    <div ref={ref} className={twMerge('h-min', className)}>
+      {consented || isPreview ? (
         iframeElement
       ) : (
         <RequestConsentContainer
           hasSectionTitle={hasSectionTitle}
           cookiePolicy={cookiePolicy}
         />
       )}
-    </section>
+    </div>
   )
 })
 

web/portableText/Blocks.tsx

@@ -475,7 +475,7 @@ export default function Blocks({
         }
         /** Basic iframe block */
         if (block._type === 'basicIframe') {
-          let marginOverride = ''
+          let marginOverride = 'my-20'
           // If the next block is a basicIframe, remove margin bottom
           if (blocks[i + 1]?._type === 'basicIframe') {
             marginOverride = 'mb-0'

web/sections/Hero/FiftyFiftyHero.tsx

@@ -48,7 +48,7 @@ export const FiftyFiftyHero = ({
   }
 
   return (
-    <section>
+    <>
       <div
         className={twMerge(
           `flex flex-col-reverse ${bg}`,
@@ -131,6 +131,6 @@ export const FiftyFiftyHero = ({
           )}
         />
       </div>
-    </section>
+    </>
   )
 }

web/sections/Hero/HeroBlock.tsx

@@ -210,7 +210,8 @@ export const HeroBlock = ({
   }
 
   return type !== HeroTypes?.NO_HERO ? (
-    <section className='h-full w-full'>
+    //bg white here because presentation tools shows grey as a fallback, the hero with background color will lay over and override the white
+    <section className='h-full w-full bg-white-100'>
       {getHero()}
       {breadcrumbs?.enableBreadcrumbs &&
         heroTypesThatHaveBreadcrumbsBelow.includes(type) && (

web/sections/IFrameBlock/IFrameBlock.tsx

@@ -43,7 +43,7 @@ const IFrameBlock = ({
       className={twMerge(`${bg} ${dark ? 'dark' : ''} `, className)}
       id={anchor}
     >
-      <div className='mx-auto max-w-content px-layout-lg pb-page-content'>
+      <div className='mx-auto max-w-content px-layout-lg'>
         {title && <Blocks variant='h2' id={headingId} value={title} />}
         <div className='flex flex-col'>
           {ingress && <Blocks variant='ingress' value={ingress} />}