pricing and storybook build and deploy; cleanup for cta headline section

functions/package.json

@@ -11,7 +11,7 @@
  "deploy": "npm run build && npm run html && firebase deploy",
  "logs": "firebase functions:log",
  "html": "cp ../build/index.html ./lib",
- "fonts": "mv ../build/fonts ./lib/functions/src"
+ "cp-storybook": "cp -Rf ../storybook-static ../build/sb"
  },
  "engines": {
  "node": "14"

package.json

@@ -58,7 +58,8 @@
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "firebaseDeploy": "firebase deploy --only hosting",
- "storybook": "sb dev"
+ "storybook": "sb dev",
+ "build-storybook": "sb build"
  },
  "eslintConfig": {
  "extends": [

sanityIo/schemas/HeadlineCTASection.js

@@ -48,6 +48,11 @@ export default {
  name: 'insetRight',
  title: 'Right Inset',
  type: 'string'
+ },
+ {
+ name: 'isHideBorder',
+ title: 'Hide Border for this Section ',
+ type: 'boolean'
  }
  ],
  preview: {

sanityIo/schemas/contentContainer.js

@@ -40,6 +40,7 @@ export default {
  {name: 'WebDevHeroContentSection', title: "Web Dev Hero Image + Content section",type: 'reference', to: [{type: 'WebDevHeroContentSection'}]},
  {name: 'WebDevStatsCounterSection', title: "Web Dev Stats Counter section",type: 'reference', to: [{type: 'WebDevStatsCounterSection'}]},
  {name: 'WebDevAboutUsSection', title: "Web Dev About Us section",type: 'reference', to: [{type: 'WebDevAboutUsSection'}]},
+ {name: 'WebDevPricingSection', title: "Web Dev pricing section",type: 'reference', to: [{type: 'WebDevPricingSection'}]},
  {name: 'ServicesSection', title: "Services section",type: 'reference', to: [{type: 'ServicesSection'}]},
  {name: 'PortfolioSection', title: "Portfolio section",type: 'reference', to: [{type: 'PortfolioSection'}]},
  {name: 'Testimonials Section', title: 'Testimonials Section', type: 'reference', to: [{type: 'TestimonialsSection'}]},

sanityIo/schemas/mui/MuiTheme.js

@@ -22,6 +22,11 @@ export default {
  title: 'App Bar Height',
  type: 'number',
  },
+ {
+ name: 'borderRadius',
+ title: 'Border Radius',
+ type: 'number',
+ },
  {
  name: 'breakpoints',
  title: 'BreakPoints',

sanityIo/schemas/schema.js

@@ -92,6 +92,8 @@ import MapSection from "./sections/MapSection";
 import PortfolioItem from "./portfolio/PortfolioItem";
 import WebDevHowItWorksSection from "./sections/web-dev/WebDevHowItWorksSection";
 import WebDevHowItWorksStep from "./sections/web-dev/WebDevHowItWorksStep";
+import WebDevPricingSection from "./sections/web-dev/WebDevPricingSection";
+import WebDevPricingPlan from "./sections/web-dev/WebDevPricingPlan";
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default [
@@ -189,5 +191,7 @@ export default [
  AnimatedPortfolioSection,
  HeroSlideContent,
  HeadlineCTASection,
- MapSection
+ MapSection,
+ WebDevPricingSection,
+ WebDevPricingPlan
 ]

sanityIo/schemas/sections/web-dev/WebDevPricingPlan.js

@@ -0,0 +1,60 @@
+export default {
+ name: 'WebDevPricingPlan',
+ title: 'Web Dev Pricing Plan',
+ type: 'object',
+ fields: [
+ {
+ name: 'isEnabled',
+ title: 'Is Enabled',
+ type: 'boolean',
+ },
+ {
+ name: 'name',
+ title: 'Name',
+ type: 'string',
+ },
+ {
+ name: 'title',
+ title: 'Title',
+ type: 'string',
+ },
+ {
+ name: 'contentTexts',
+ title: 'Content Text',
+ type: 'array',
+ of:[{type: 'text'}]
+ },
+ {
+ name: 'cost',
+ title: 'Cost',
+ type: 'string',
+ },
+ {
+ name: 'learnMoreText',
+ title: 'Learn More Text',
+ type: 'string'
+ },
+ {
+ name: 'learnMoreLink',
+ title: 'Learn More Link',
+ type: 'string'
+ },
+ {
+ name: 'slug',
+ title: 'Slug',
+ type: 'slug',
+ options: {
+ source: 'title',
+ maxLength: 96,
+ },
+ },
+ ],
+ preview: {
+ select: {
+ title: 'name',
+ },
+ },
+}
+
+
+

sanityIo/schemas/sections/web-dev/WebDevPricingSection.js

@@ -0,0 +1,49 @@
+
+export default {
+ name: 'WebDevPricingSection',
+ title: "Web Dev Pricing Section",
+ type: 'document',
+ fields: [
+ {
+ name: 'name',
+ title: 'Name',
+ type: 'string',
+ },
+ {
+ name: 'theme',
+ title: 'Theme',
+ type: 'reference',
+ to:[{type: 'MuiTheme'}]
+ },
+ {
+ name: 'contentPreTitle',
+ title: 'Pre Title',
+ type: 'string',
+ },
+ {
+ name: 'contentTitle',
+ title: 'Large Title',
+ type: 'string',
+ },
+ {
+ name: 'contentTexts',
+ title: 'Content Text',
+ type: 'array',
+ of:[{type: 'text'}]
+ },
+ {
+ name: 'plans',
+ title: 'Pricing Plans',
+ type: 'array',
+ of:[{type: 'WebDevPricingPlan'}]
+ },
+ ],
+ preview: {
+ select: {
+ title: 'name',
+ },
+ },
+}
+
+
+

src/common/sanityIo/Types.ts

@@ -97,6 +97,8 @@ export type SanityMuiTheme = {
  title?: string
  slug?: SanitySlug
  appBarHeight?: number
+ borderRadius?: number
+ shape?: {borderRadius: number}
  breakpoints?: SanityMuiBreakpoints
  colorPalette?: SanityMuiColorPalette
  typography?: SanityMuiTypography

src/components/BlockContentLayoutContainer.tsx

@@ -7,7 +7,7 @@ import {
  AnimatedAboutUsSectionType, AnimatedPortfolioSectionType, AnimatedServicesSectionType, HeadlineCTASectionType,
  HeroAnimatedContentSectionType,
  HowItWorksSectionType, MapSectionType,
- PortfolioSectionType,
+ PortfolioSectionType, PricingSectionType,
  ResumeBioSectionType,
  ResumeContactUsSectionType,
  ResumeEducationSectionType,
@@ -58,6 +58,7 @@ import AnimatedServicesSection from './animated/AnimatedServicesSection'
 import AnimatedPortfolioSection from "./animated/AnimatedPortfolioSection";
 import HeadlineCTASection from "./animated/HeadlineCTASection";
 import MapSection from "./animated/MapSection";
+import WebDevPricingSection from "./templates/web-dev-site/WebDevPricingSection";
 
 export type BlockContentLayoutContainerProps = {
  content?: any,
@@ -459,7 +460,7 @@ const BlockContentLayoutContainer: FunctionComponent<BlockContentLayoutContainer
  sectionData={headlineSection}
  />
  </Grid>
-  case 'MapSection':
+ case 'MapSection':
  const mapSection: MapSectionType = columnLayoutContainer
 
  return <Grid key={'map-section'} container item>
@@ -469,6 +470,16 @@ const BlockContentLayoutContainer: FunctionComponent<BlockContentLayoutContainer
  sectionData={mapSection}
  />
  </Grid>
+ case 'WebDevPricingSection':
+ const pricingSection: PricingSectionType = columnLayoutContainer
+
+ return <Grid key={'map-section'} container item>
+ <Link id={"PRICING_SECTION"} underline="hover"><></>
+ </Link>
+ <WebDevPricingSection
+ sectionData={pricingSection}
+ />
+ </Grid>
  default:
  return <Grid container item></Grid>
  // return <span key={index}>Undefined section {columnLayoutContainer._type}</span>

src/components/BlockContentTypes.ts

@@ -591,6 +591,17 @@ export type HowItWorksStepNoRefType = {
  learnMoreLink?: string
  learnMoreText?: string
 }
+export type PricingPlanNoRefType = {
+ // _type?: "WebDevHowItWorksStep",
+ title?: string
+ name?: string
+ slug?: SanitySlug
+ cost?: string
+ isEnabled?: boolean
+ contentTexts?: string[]
+ learnMoreLink?: string
+ learnMoreText?: string
+}
 export type HowItWorksSectionType = {
  _type: "WebDevHowItWorksSection"
  name: string
@@ -599,6 +610,14 @@ export type HowItWorksSectionType = {
  contentTexts: string[]
  steps: HowItWorksStepNoRefType[]
 }
+export type PricingSectionType = {
+ // _type: "WebDevHowItWorksSection"
+ name: string
+ contentTitle: string
+ contentPreTitle: string
+ contentTexts: string[]
+ plans: PricingPlanNoRefType[]
+}
 
 export type DevelopmentHeaderSectionType = {
  name: string
@@ -640,6 +659,7 @@ export type SanityDocumentFields = {
 
 export type HeadlineCTASectionType = {
  name: string
+ isHideBorder?:boolean
  contentText: string
  ctaButtonText: string
  ctaButtonLink: string

src/components/animated/HeadlineCTASection.tsx

@@ -12,7 +12,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
  },
 }))
 
-interface IProps { sectionData: HeadlineCTASectionType }
+interface IProps { sectionData: HeadlineCTASectionType,  }
 
 const HeadlineCTASection: FunctionComponent<IProps> = (props:IProps) => {
  const theme = useTheme()
@@ -29,20 +29,20 @@ const HeadlineCTASection: FunctionComponent<IProps> = (props:IProps) => {
  backgroundImage: `url(${urlFor(props.sectionData.backgroundImgSrc).url()})`,
  backgroundSize: "40%, 40%",
  // backgroundRepeat: "no-repeat",
- borderRadius: mdDown?0:1,
- border:mdDown?'none':`1px solid ${theme.palette.primary.main}`,
+ // borderRadius: mdDown?0:1,
+ border:mdDown || props.sectionData.isHideBorder ?'none':`1px solid ${theme.palette.primary.main}`,
  marginLeft: mdDown?0:props.sectionData.insetLeft,
  marginRight: mdDown?0:props.sectionData.insetRight,
  marginTop: mdDown?0:props.sectionData.insetTop,
  marginBottom: mdDown?0:props.sectionData.insetBottom,
  }}>
- <Grid container alignItems='center' alignContent='center' item
- style={{ padding: "40px"}} md={8}>
+ <Grid container alignItems='center' alignContent='center' item justifyContent={smDown?'center':'flex-start'}
+ style={{ padding: "40px"}} sm={8}>
  <Typography variant={'h4'} color='primary'>
  {props.sectionData.contentText}
  </Typography>
  </Grid>
- <Grid style={{padding: "40px"}} container item justifyContent={smDown?'center':'flex-end'} alignItems='center' alignContent='center' md={4} >
+ <Grid style={{padding: theme.spacing(!smDown?5:0,5,5,5)}} container item justifyContent={smDown?'center':'flex-end'} alignItems='center' alignContent='center' sm={4} >
  <Button color='primary' variant='contained'
  onClick={() => {
  firebaseAnalyticsClient.ctaClick("hero-section", props.sectionData.ctaButtonText, pageContext.analyticsId,)

src/components/customized-theme-provider/getThemeFromSanity.ts

@@ -48,6 +48,9 @@ const getThemeFromSanity = (theme: SanityMuiTheme) => {
  xl: parseInt(String(theme.breakpoints?.xl ?? 1320)),
  }
  },
+ shape:{
+ borderRadius: parseInt(String(theme.borderRadius ?? "4"))
+ },
  palette: {
  background: {
  default: theme.colorPalette?.defaultBackground ? convertToHexCode(theme.colorPalette?.defaultBackground) : COLORS.WHITESMOKE,

src/components/templates/mackenzies-mind/footer/Footer.tsx

@@ -73,6 +73,7 @@ const Footer: FunctionComponent<IProps> = (props: IProps) => {
  <Grid container justifyContent="flex-start" sx={{paddingTop: mdDown ? 0 : (props.topPadding ?? "0px")}}>
  <Grid item xs={12}>
  {props.pageFooter && <FooterMenuContainer
+ backgroundColor={props.backgroundColor}
  isSocialMediaBlock={props.isSocialMediaBlock}
  pageFooterMenu={props.pageFooter}
  updateIsLoading={props.updateIsLoading}

src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx

@@ -10,12 +10,13 @@ import AlternatingText from "../../../logo/AlternatingText";
 import SocialMediaBlock from "../../my-digital-resume/social-media-block/SocialMediaBlock";
 import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
 import {SanityImageAsset} from "../../../BlockContentTypes";
-import {COLORS} from "../../../../theme/common/ColorPalette";
+import {COLORS, convertToHexCode} from "../../../../theme/common/ColorPalette";
 
 interface IProps {
  pageFooterMenu?: SanityMenuContainer
  updateIsLoading?: (value: boolean) => void
  isSocialMediaBlock?:boolean
+ backgroundColor?:string
 }
 
 const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
@@ -25,7 +26,7 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
  const pageContext = useContext(PageContext)
  const useStyles = makeStyles(({
  root: {
- color: theme.palette.text.secondary,
+ color: theme.palette.getContrastText(convertToHexCode(props.backgroundColor)),
  }
  }))
  const classes = useStyles(theme)
@@ -45,6 +46,7 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
  backgroundColor: COLORS.TRANSPARENTERWHITE,
  borderRight: `4px solid ${theme.palette.primary.main}`,
  } : { }}
+ justifyContent={mdDown?'center':'flex-start'}
  >
  {
  props.pageFooterMenu?.subMenus?.map((menuGroup: any, index: number) => {
@@ -91,7 +93,7 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
  </Grid>
  <Grid container item spacing={1} justifyContent='center'>
  {<Grid item>
- <MailTo color={"#383838"} email={pageContext.page?.businessContact?.email ?? ""}
+ <MailTo color={"inherit"} email={pageContext.page?.businessContact?.email ?? ""}
  subject={"Information Request"}
  body={""}><Typography
  color='inherit'>{pageContext.page?.businessContact?.email}</Typography></MailTo>

src/components/templates/web-dev-site/WebDevAboutUsSection.tsx

@@ -7,10 +7,6 @@ import WebDevSiteTheme from "../../../theme/WebDevSiteTheme";
 import {COLORS} from "../../../theme/common/ColorPalette";
 import {urlFor} from "../../block-content-ui/static-pages/cmsStaticPagesClient";
 
-
-
-
-
 export const useStyles = makeStyles((theme: Theme) => ({
  root: {
  minHeight: '521px',
@@ -32,8 +28,6 @@ const WebDevAboutUsSection: FunctionComponent<IProps> = (props) => {
  const theme = useTheme()
 
  return (
- <StyledEngineProvider injectFirst>
- <ThemeProvider theme={WebDevSiteTheme}>
  <Grid container item className={classes.root} alignItems='stretch'>
  <Grid
  item
@@ -110,8 +104,6 @@ const WebDevAboutUsSection: FunctionComponent<IProps> = (props) => {
  </Grid>
  </Grid>
  </Grid>
- </ThemeProvider>
- </StyledEngineProvider>
  );
 }