Header (#1)

* update url to branded as chow-works

* add vision tool to sanity

* Add enhanced header

* added close button to full text search

* firebase functions bump

* functions version bump

functions/package.json

@@ -17,34 +17,34 @@
   },
   "main": "lib/index.js",
   "dependencies": {
-    "@sanity/client": "^3.4.1",
-    "@sanity/image-url": "^1.0.1",
-    "@sanity/types": "^2.34.0",
+    "@sanity/client": "^6.8.5",
+    "@sanity/image-url": "^1.0.2",
+    "@sanity/types": "^3.19.3",
     "@sendgrid/mail": "^7.7.0",
-    "@shopify/shopify-api": "^2.0.0",
-    "axios": "^0.24.0",
-    "dotenv": "^16.0.3",
+    "@shopify/shopify-api": "^8.0.2",
+    "axios": "^1.6.2",
+    "dotenv": "^16.3.1",
     "es6-promise": "^4.2.8",
     "express": "^4.18.2",
-    "firebase-admin": "^11.1.0",
-    "firebase-functions": "^4.4.1",
+    "firebase-admin": "^11.11.0",
+    "firebase-functions": "^4.5.0",
     "json-bigint": "^1.0.0",
-    "node-fetch": "^2.6.6",
-    "prerender-node": "^3.5.0",
-    "uuid": "^8.3.2"
+    "node-fetch": "^3.3.2",
+    "prerender-node": "^3.7.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/firebase": "^3.2.1",
     "@types/json-bigint": "^1.0.1",
     "@types/node-fetch": "^2.5.12",
-    "@types/uuid": "^8.3.3",
-    "@types/ws": "^8.2.2",
-    "@typescript-eslint/eslint-plugin": "^3.9.1",
-    "@typescript-eslint/parser": "^3.8.0",
-    "eslint": "^7.6.0",
+    "@types/uuid": "^9.0.7",
+    "@types/ws": "^8.5.9",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "eslint": "^8.53.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-import": "^2.22.0",
-    "firebase-functions-test": "^0.2.0",
+    "eslint-plugin-import": "^2.29.0",
+    "firebase-functions-test": "^3.1.0",
     "typescript": "^5.1.3"
   },
   "private": true

functions/src/groqQueries.ts

@@ -29,16 +29,10 @@ const MENUGROUP = `
 `;
 
 const MENUGROUPCONTAINER = `
-          title,
-          slug,
-          displayText,
           "subMenus":subMenus[]->{
             ${MENUGROUP}
           },
-          logoImageSrc,
-          logoImageAltText,
-          logoText,
-          logoAccentText
+          ...
 `;
 
 const SERVICE =

sanityIo/sanity.config.js

@@ -1,12 +1,13 @@
 import { defineConfig } from "sanity";
 import { deskTool } from 'sanity/desk'
 import schemas from './schemas/schema'
+import {visionTool} from "@sanity/vision";
 
 export default defineConfig({
     title: "Chow Works Website",
     projectId: "rhjxlvuj",
     dataset: "development",
-    plugins: [deskTool()],
+    plugins: [deskTool(), visionTool()],
     schema: {
         types: schemas,
     },

sanityIo/schemas/sections/HeaderSection.js

@@ -8,6 +8,32 @@ export default {
             title: 'Name',
             type: 'string',
         },
+        {
+            name: 'isEnhanced',
+            title: 'Is This Header Enhanced?',
+            type: 'boolean',
+        },
+        {
+            name: 'ctaButtonText',
+            title: 'CTA Button Text',
+            type: 'string'
+        },
+        {
+            name: 'isSearch',
+            title: 'Is Search included in header',
+            type: 'boolean'
+        },
+        {
+            name: 'ctaButtonLink',
+            title: 'CTA Button Link',
+            type: 'string'
+        },
+        {
+            name: 'highlightedDetails',
+            title: 'HighlightedDetails',
+            type: 'array',
+            of:[{type: 'ServiceAmenityItem'}]
+        },
         {
             name: 'headerMenuRef',
             title: 'Header Menu',

src/App.tsx

@@ -12,8 +12,8 @@ import PageMux from "./components/templates/mackenzies-mind/pages/PageMux";
 import CustomizedThemeProvider from "./components/customized-theme-provider/CustomizedThemeProvider";
 
 export enum RoutesEnum {
-    MAINROUTE = "/resume/:pageSlug",
-    HOMEROUTE = "/resume/home",
+    MAINROUTE = "/chow-works/:pageSlug",
+    HOMEROUTE = "/chow-works/home",
 
     ERROR = '/error'
 }

src/common/sanityIo/Types.ts

@@ -223,6 +223,8 @@ export type SanityMenuContainer = {
     logoText?: string
     logoAccentText?: string
     logoImageSrc?: SanityImageAsset
+    isSearch?: boolean
+
 }
 
 export type MainMenuAnchorType = 'left' | 'top' | 'right' | 'bottom'

src/common/sanityIo/groqQueries.ts

@@ -29,16 +29,10 @@ const MENUGROUP = `
 `
 
 const MENUGROUPCONTAINER = `
-          title,
-          slug,
-          displayText,
+          ...,
           "subMenus":subMenus[]->{
             ${MENUGROUP}
-          },
-          logoImageSrc,
-          logoImageAltText,
-          logoAccentText,
-          logoText
+          }
 `
 
 const SERVICE =

src/components/BlockContentTypes.ts

@@ -215,6 +215,7 @@ export type AnimatedServiceItemNoRefType = {
 export type AnimatedServicesSectionType = {
     name: string
     heroBullet?:SanityImageAsset
+    title:string
     contentTitle: string
     contentPreTitle: string
     contentText: string
@@ -560,6 +561,11 @@ export type DevelopmentHeaderSectionType = {
 }
 export type HeaderSectionType = {
     name: string
+    isSearch: boolean
+    isEnhanced: boolean
+    ctaButtonText: string
+    ctaButtonLink: string
+    highlightedDetails: ServiceAmenityType[]
     headerMenuRef: SanityMenuContainer
 }
 export type DevelopmentFooterSectionType = {

src/components/HeaderBlockContentLayoutContainer.tsx

@@ -1,28 +1,28 @@
-import React, {FunctionComponent} from 'react'
+import React, {FunctionComponent, useContext} from 'react'
 import BlockContent from '@sanity/block-content-to-react'
-import { Card, Grid, Link, ThemeProvider, Theme, StyledEngineProvider } from '@mui/material';
+import {Card, Grid, Link, Theme, ThemeProvider} from '@mui/material';
 import sanityClient from '../sanityClient'
 import {blockSerializers} from '../common/sanityIo/BlockContentRenderer'
 import {DevelopmentHeaderSectionType, HeaderSectionType,} from "./BlockContentTypes";
-import TheWebsiteTheme from "../theme/Theme";
 import useThwCommonStyles from "../common/sanityIo/ThwCommonStyles";
 import DevelopmentHeader from "./templates/mackenzies-mind/header/DevelopmentHeader";
 import Header from "./templates/mackenzies-mind/header/Header";
 import WebDevSiteTheme from "../theme/WebDevSiteTheme";
-import TransformHWTheme from "../theme/TransformHWTheme";
-
+import EnhancedHeader from "./templates/mackenzies-mind/header/EnhancedHeader";
+import CustomizedThemeContext from "./customized-theme-provider/CustomizedThemeContext";
 
 
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface DefaultTheme extends Theme {
+    }
 }
 
 
-
 declare module '@mui/styles/defaultTheme' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface DefaultTheme extends Theme {
+    }
 }
 
 
@@ -32,13 +32,37 @@ export type HeaderBlockContentLayoutContainerProps = {
 
 const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLayoutContainerProps> = (props) => {
     const classes = useThwCommonStyles()
+    // const mdDown = widthUtils.useIsWidthDown('md')
+    const customizedTheme = useContext(CustomizedThemeContext)
+
+    const [showBasicHeader, setShowBasicHeader] = React.useState<boolean>(false)
+
+    React.useEffect(() => {
+        const handResize = () => {
+            if (window.innerWidth < customizedTheme.customizedTheme.breakpoints.values['md']) {
+                setShowBasicHeader(true)
+            } else {
+                setShowBasicHeader(false)
+            }
+        }
+        window.addEventListener('resize', handResize)
+        handResize()
+
+        return () => {
+            window.removeEventListener('resize', handResize)
+        }
+
+
+    },[])
+
 
     return (
         <Grid container item>
             {props?.content?.map((columnLayoutContainer: any, index: number) => {
                 switch (columnLayoutContainer._type) {
                     case 'column1BlockContent':
-                        return <Grid key={'column1BlockContent_header'} container justifyContent='center' alignItems='stretch'>
+                        return <Grid key={'column1BlockContent_header'} container justifyContent='center'
+                                     alignItems='stretch'>
                             <Grid item>
                                 <Card className={classes.root} style={{paddingTop: '80px'}}>
                                     <Grid container item xs={12} className={classes.layoutContainer}>
@@ -55,7 +79,8 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                             </Grid>
                         </Grid>
                     case 'column2BlockContent':
-                        return <Grid key={'column2BlockContent_header'} container justifyContent='center' alignItems='stretch'>
+                        return <Grid key={'column2BlockContent_header'} container justifyContent='center'
+                                     alignItems='stretch'>
                             <Grid item>
                                 <Card className={classes.root} style={{paddingTop: '80px'}}>
                                     <Grid container item xs={12} className={classes.layoutContainer}>
@@ -82,25 +107,35 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                         const developmentHeader: DevelopmentHeaderSectionType = columnLayoutContainer
 
                         return (
-                                <ThemeProvider theme={WebDevSiteTheme} key={'TOP_OF_PAGE_DEV'}><Grid  container item xs={12} style={{height: WebDevSiteTheme.mixins.toolbar.height}} alignContent='center' alignItems='center'>
+                            <ThemeProvider theme={WebDevSiteTheme} key={'TOP_OF_PAGE_DEV'}>
+                                <Grid container item xs={12}
+                                      style={{height: WebDevSiteTheme.mixins.toolbar.height}}
+                                      alignContent='center'
+                                      alignItems='center'>
                                     <Link id={"TOP_OF_PAGE"} underline="hover"><></>
                                     </Link>
                                     <DevelopmentHeader
                                         pageHeader={developmentHeader.headerMenuRef}
                                     />
-                                </Grid></ThemeProvider>
+                                </Grid>
+                            </ThemeProvider>
                         );
                     case 'HeaderSection':
                         const header: HeaderSectionType = columnLayoutContainer
 
                         return (
-                                <ThemeProvider theme={TheWebsiteTheme}  key={'TOP_OF_PAGE'}><Grid container item xs={12} style={{height: TheWebsiteTheme.mixins.toolbar.height}}>
+                            <ThemeProvider theme={customizedTheme} key={'TOP_OF_PAGE'}>
+                                <Grid container item xs={12}>
                                     <Link id={"TOP_OF_PAGE"} underline="hover"><></>
                                     </Link>
-                                    <Header
-                                        pageHeader={header.headerMenuRef}
-                                    />
-                                </Grid></ThemeProvider>
+                                    {
+                                        showBasicHeader || !header.isEnhanced ?
+                                            <Header isSearch={header.isSearch} isAppBar={true}
+                                                    pageHeader={header.headerMenuRef}/>
+                                            : <EnhancedHeader pageHeader={header}/>
+                                    }
+                                </Grid>
+                            </ThemeProvider>
                         );
                     default:
                         return <span key={index}>Undefined section {columnLayoutContainer._type}</span>

src/components/animated/AnimatedAboutUsSection.tsx

@@ -24,14 +24,10 @@ interface IProps {
 
 const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
     const classes = useStyles()
-    const mdDown = widthUtils.useIsWidthDown('md')
+    // const mdDown = widthUtils.useIsWidthDown('md')
     const customizedThemeContext = useContext(CustomizedThemeContext)
 
 
-    React.useEffect(() => {
-        console.log("MD down", mdDown)
-    }, [mdDown])
-
     return (
         <ThemeProvider theme={customizedThemeContext.customizedTheme}>
             <Grid container item className={classes.root} xs={12} alignItems='center'>

src/components/animated/HeroAnimatedContentSection.tsx

@@ -24,7 +24,7 @@ interface CSSProps {
 export const useStyles = makeStyles((theme: Theme) => ({
     contentSection: {
         height: '700px',
-        marginTop: '16px',
+        // marginTop: '16px',
         backgroundColor: 'transparent',
 // minWidth:"350px"
     },
@@ -57,7 +57,7 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
 
     return (
         <ThemeProvider theme={themeContext.customizedTheme}>
-            <Grid container item style={{overflow: "hidden"}}>
+            <Grid container item style={{overflow: "hidden", paddingTop: "148px"}}>
                 <motion.div
                     animate={{scale: 1}}
                     initial={{scale: 1.1}}
@@ -129,7 +129,8 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
 
                                                 >
                                                     <Grid container item justifyContent='center'>
-                                                        <Grid item container justifyContent='center' spacing={1} wrap='nowrap'>
+                                                        <Grid item container justifyContent='center' spacing={1}
+                                                              wrap='nowrap'>
                                                             <Grid item>
                                                                 {contentSlide?.heroBullet && <img width={12}
                                                                                                   src={urlFor(contentSlide?.heroBullet).url() ?? ""}/>}
@@ -230,7 +231,8 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
                                 </Grid>
                             </Grid>
                         </Grid>
-                    </Grid></motion.div>
+                    </Grid>
+                </motion.div>
             </Grid>
         </ThemeProvider>
     )