From 254d21f0aaab616fa664ccf97496592bc32efbd9 Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Tue, 3 Oct 2023 21:21:14 +0800 Subject: [PATCH 1/9] feat(hero): connect hero to cms --- src/revamp/ui/HeroV2/index.js | 8 +++----- src/views/zesty/Homepage.js | 17 ++++++++++++++++- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/revamp/ui/HeroV2/index.js b/src/revamp/ui/HeroV2/index.js index fa8a10fc2..12d94b6ec 100644 --- a/src/revamp/ui/HeroV2/index.js +++ b/src/revamp/ui/HeroV2/index.js @@ -61,21 +61,19 @@ const logos = [ ]; const Hero = ({ - header = 'Data Driven, Drag & Drop, Composable, Content Management', - subtitle = 'Drive business growth with a Hybrid Headless CMS to create, deliver, measure, and optimize your content marketing at scale. ', + HeroText = ['Composable', 'Data Driven', 'Drag & Drop', 'AI Assisted'], primaryBtn = 'Free Consultation', primaryBtnLink = '/demo?ab=light', secondaryBtn = 'Watch Demo Video', secondaryBtnLink = '/demos/video?ab=light', subtitle2 = 'TRUSTED BY INDUSTRY LEADING COMPANIES', + heroImage = media, }) => { const theme = useTheme(); const isLg = useMediaQuery(theme.breakpoints.up('lg'), { defaultMatches: true, }); - const HeroText = ['Composable', 'Data Driven', 'Drag & Drop', 'AI Assisted']; - const [currentTextIndex, setCurrentTextIndex] = useState(0); useEffect(() => { @@ -261,7 +259,7 @@ const Hero = ({ }, })} > - {generateAlt('Zesty + {generateAlt('Zesty ); diff --git a/src/views/zesty/Homepage.js b/src/views/zesty/Homepage.js index 22d855053..8dfbe566b 100644 --- a/src/views/zesty/Homepage.js +++ b/src/views/zesty/Homepage.js @@ -90,10 +90,25 @@ function Homepage({ content }) { } }, [content.zesty.isAuthenticated, isLoggedIn]); + console.log(content); + + const heroProps = { + HeroText: content?.header_title_and_description + .replace(/<[^>]*>/g, '') + .replace('&', '&') + .split(','), + primaryBtn: content?.primarybtn, + primaryBtnLink: content?.primarybtnlink?.data?.[0].meta?.web?.uri, + secondaryBtn: content?.secondarybtn, + secondaryBtnLink: content?.secondarybtnlink?.data?.[0].meta?.web?.uri, + subtitle2: content?.subtitle, + heroImage: content?.header_graphic?.data?.[0]?.url, + }; + return ( <> revampTheme(palette.mode)}> - + revampTheme(palette.mode)}> From f4fe843ea8c186d2dc9cd375d004c8ea300ed0a7 Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Tue, 3 Oct 2023 23:42:23 +0800 Subject: [PATCH 2/9] feat(tabsection): connect tab section component back to cms --- src/revamp/ui/TabsSection/index.js | 73 ++++++++++++++++++++++++++---- src/views/zesty/Homepage.js | 15 ++++-- 2 files changed, 77 insertions(+), 11 deletions(-) diff --git a/src/revamp/ui/TabsSection/index.js b/src/revamp/ui/TabsSection/index.js index 1a5894f51..3f36c65ab 100644 --- a/src/revamp/ui/TabsSection/index.js +++ b/src/revamp/ui/TabsSection/index.js @@ -11,6 +11,33 @@ import SchemaRoundedIcon from '@mui/icons-material/SchemaRounded'; import TabSection from './TabSection'; import React, { useEffect, useState } from 'react'; +const icons = [ + { + name: 'ScienceRoundedIcon', + icon: , + }, + { + name: 'EditRoundedIcon', + icon: , + }, + { + name: 'SchemaRoundedIcon', + icon: , + }, + { + name: 'ImageRoundedIcon', + icon: , + }, + { + name: 'PsychologyRoundedIcon', + icon: , + }, + { + name: 'TranslateRoundedIcon', + icon: , + }, +]; + const tabLists = [ { name: 'A/B Testing', @@ -124,8 +151,40 @@ function TabPanel(props) { const TabsSection = ({ header = 'Personalization, A/B Testing, Integrated Analytics, Any Business Configuration', + tabs, }) => { const [value, setValue] = useState('Content'); + const [list, setList] = useState(tabLists); + + useEffect(() => { + if (tabs) { + setList( + tabs?.data?.map((tab) => { + const regex = /
  • (.*?)<\/li>/g; + const liTextArray = []; + + // Use a loop to iterate through matches and extract the text content + let match; + while ((match = regex.exec(tab.lists)) !== null) { + liTextArray.push(match[1]); + } + + const tabSectionProps = { + header: tab?.header, + lists: liTextArray, + image: tab?.image?.data[0]?.url, + primaryBtn: tab?.cta_text, + primaryBtnLink: tab?.cta_link, + }; + return { + name: tab.name, + icon: icons?.find((icon) => icon.name === tab.feature_icon)?.icon, + component: , + }; + }), + ); + } + }, []); const handleChange = (event, newValue) => { setValue(newValue); @@ -134,16 +193,14 @@ const TabsSection = ({ useEffect(() => { const interval = setInterval(() => { setValue((prevValue) => { - const currentIndex = tabLists.findIndex( - (tab) => tab.name === prevValue, - ); - const nextIndex = (currentIndex + 1) % tabLists.length; - return tabLists[nextIndex].name; + const currentIndex = list?.findIndex((tab) => tab.name === prevValue); + const nextIndex = (currentIndex + 1) % list?.length; + return list[nextIndex]?.name; }); }, 2500); return () => clearInterval(interval); - }, [tabLists]); + }, [list]); return ( - {tabLists.map((tab) => ( + {list?.map((tab) => ( ))} - {tabLists.map((tab) => ( + {list?.map((tab) => ( import('revamp/ui/GetDemoSection'), { loading: () =>

    Loading...

    , }); +export const removeHTMLtags = (str) => { + if (str == '' || str == null || str == undefined) return undefined; + return str.replace(/<[^>]*>/g, ''); +}; + function Homepage({ content }) { const { palette } = useTheme(); const isLoggedIn = useIsLoggedIn(); @@ -93,8 +98,7 @@ function Homepage({ content }) { console.log(content); const heroProps = { - HeroText: content?.header_title_and_description - .replace(/<[^>]*>/g, '') + HeroText: removeHTMLtags(content?.header_title_and_description) .replace('&', '&') .split(','), primaryBtn: content?.primarybtn, @@ -105,13 +109,18 @@ function Homepage({ content }) { heroImage: content?.header_graphic?.data?.[0]?.url, }; + const tabSectionProps = { + header: removeHTMLtags(content?.features_title), + tabs: content?.features_options, + }; + return ( <> revampTheme(palette.mode)}> revampTheme(palette.mode)}> - + From 6c025c54655c3d4bacc4226d6e37ec6e0ffaabc0 Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Wed, 4 Oct 2023 00:17:20 +0800 Subject: [PATCH 3/9] feat(entreprisegrowth): connect enterprise component to cms --- src/revamp/ui/EnterpriseGrowth/index.js | 2 +- src/views/zesty/Homepage.js | 28 +++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/revamp/ui/EnterpriseGrowth/index.js b/src/revamp/ui/EnterpriseGrowth/index.js index 08a33fb2e..398c676d6 100644 --- a/src/revamp/ui/EnterpriseGrowth/index.js +++ b/src/revamp/ui/EnterpriseGrowth/index.js @@ -215,7 +215,7 @@ const EnterpriseGrowth = ({ - {caseStudiesList.map((c, index) => ( + {caseStudiesList?.map((c, index) => ( { + return { + mainImage: item?.main_image?.data?.[0]?.url, + logo: item?.logo?.data?.[0]?.url, + description: item?.description, + link: item?.link?.data[0]?.meta?.web?.uri, + }; + }), + }; + return ( <> revampTheme(palette.mode)}> @@ -121,8 +145,8 @@ function Homepage({ content }) { revampTheme(palette.mode)}> - - + + From 9b4548956a22f33de57b531b59577b7bfd46d392 Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Wed, 4 Oct 2023 00:37:26 +0800 Subject: [PATCH 4/9] feat(feature testimonials): connect feature testimonials to cms --- src/views/zesty/Homepage.js | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/views/zesty/Homepage.js b/src/views/zesty/Homepage.js index 9f27bbb88..9eb3181c7 100644 --- a/src/views/zesty/Homepage.js +++ b/src/views/zesty/Homepage.js @@ -138,6 +138,27 @@ function Homepage({ content }) { }), }; + const regex = /
  • (.*?)<\/li>/g; + const featureTestimonialsList = []; + + // Use a loop to iterate through matches and extract the text content + let match; + while ( + (match = regex.exec(content?.feature_testimonial_list_items)) !== null + ) { + featureTestimonialsList.push(match[1]); + } + + const featureTestimonialsProps = { + overline: content?.feature_testimonial_overline, + heading: content?.feature_testimonial_heading, + supportingText: content?.feature_testimonial_supporting__text, + image: content.feature_testimonial_image?.data?.[0]?.url, + testimonial: content?.feature_testimonial_, + testimonialLogo: content.feature_testimonial_logo?.data?.[0]?.url, + lists: featureTestimonialsList, + }; + return ( <> revampTheme(palette.mode)}> @@ -147,7 +168,7 @@ function Homepage({ content }) { - + From eac39f0c3cff478e534eb127b19389396ac9596a Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Wed, 4 Oct 2023 00:45:16 +0800 Subject: [PATCH 5/9] feat(single testimonials): connect single testimonials --- src/views/zesty/Homepage.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/views/zesty/Homepage.js b/src/views/zesty/Homepage.js index 9eb3181c7..470f57719 100644 --- a/src/views/zesty/Homepage.js +++ b/src/views/zesty/Homepage.js @@ -159,6 +159,17 @@ function Homepage({ content }) { lists: featureTestimonialsList, }; + const singleTestimonialProps = { + witness: content?.singletestimonial_witness.data?.[0]?.url, + name: content?.singletestimonial_name, + role: content?.singletestimonial_role, + logo: content?.singletestimonial_logo?.data?.[0]?.url, + header: content?.singletestimonial_header, + quote: content?.singletestimonial_quote, + }; + + console.log(singleTestimonialProps); + return ( <> revampTheme(palette.mode)}> @@ -169,7 +180,7 @@ function Homepage({ content }) { - + From 09f8584ceafcacae8d9e983243ce2f67d7b41e1a Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Wed, 4 Oct 2023 00:50:25 +0800 Subject: [PATCH 6/9] feat(enterprise): fix image case study --- src/revamp/ui/EnterpriseGrowth/index.js | 3 ++- src/views/zesty/Homepage.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/revamp/ui/EnterpriseGrowth/index.js b/src/revamp/ui/EnterpriseGrowth/index.js index 398c676d6..6708ce421 100644 --- a/src/revamp/ui/EnterpriseGrowth/index.js +++ b/src/revamp/ui/EnterpriseGrowth/index.js @@ -225,7 +225,8 @@ const EnterpriseGrowth = ({ src={c.mainImage} loading="lazy" alt={generateAlt('')} - width={707} + style={{ width: '100%', height: 'auto' }} + width={600} height={400} /> diff --git a/src/views/zesty/Homepage.js b/src/views/zesty/Homepage.js index 470f57719..41aa2b185 100644 --- a/src/views/zesty/Homepage.js +++ b/src/views/zesty/Homepage.js @@ -160,7 +160,7 @@ function Homepage({ content }) { }; const singleTestimonialProps = { - witness: content?.singletestimonial_witness.data?.[0]?.url, + witness: content?.singletestimonial_witness?.data?.[0]?.url, name: content?.singletestimonial_name, role: content?.singletestimonial_role, logo: content?.singletestimonial_logo?.data?.[0]?.url, From c2a026d0eff41dd6f567616b1211174f88a1299b Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Wed, 4 Oct 2023 21:25:39 +0800 Subject: [PATCH 7/9] feat(homepage): complete connected everything to cms --- src/revamp/ui/SecurityFeature/index.js | 1 + src/views/zesty/Homepage.js | 24 +++++++++++++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/revamp/ui/SecurityFeature/index.js b/src/revamp/ui/SecurityFeature/index.js index 712bee13a..bc9f37a5e 100644 --- a/src/revamp/ui/SecurityFeature/index.js +++ b/src/revamp/ui/SecurityFeature/index.js @@ -93,6 +93,7 @@ const SecurityFeature = ({ src={image} loading="lazy" alt="zesty-image" + style={{ width: '100%', height: '100%' }} width={700} height={420} /> diff --git a/src/views/zesty/Homepage.js b/src/views/zesty/Homepage.js index 41aa2b185..e851f057a 100644 --- a/src/views/zesty/Homepage.js +++ b/src/views/zesty/Homepage.js @@ -168,7 +168,25 @@ function Homepage({ content }) { quote: content?.singletestimonial_quote, }; - console.log(singleTestimonialProps); + const gridFeatureProps = { + overline: content?.grid_feature_overline, + heading: content?.grid_feature_heading, + supportingText: content?.grid_feature_supporting_text, + featureLists: content?.grid_feature_list?.data?.map((item) => { + return { + image: item?.feature_image?.data?.[0]?.url, + title: item?.feature_title, + description: item?.feature_description, + }; + }), + }; + + const securityFeatureProps = { + overline: content?.security_feature_overline, + heading: content?.security_feature_heding, + supportingText: content?.security_feature_supporting_text, + image: content?.security_feature_image?.data?.[0]?.url, + }; return ( <> @@ -181,8 +199,8 @@ function Homepage({ content }) { - - + + From 233d0392543ac94a00edc9db54d565f241827707 Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Wed, 4 Oct 2023 21:26:14 +0800 Subject: [PATCH 8/9] feat(cleanup): cleanup --- src/views/zesty/Homepage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/views/zesty/Homepage.js b/src/views/zesty/Homepage.js index e851f057a..172677a8c 100644 --- a/src/views/zesty/Homepage.js +++ b/src/views/zesty/Homepage.js @@ -95,8 +95,6 @@ function Homepage({ content }) { } }, [content.zesty.isAuthenticated, isLoggedIn]); - console.log(content); - const heroProps = { HeroText: removeHTMLtags(content?.header_title_and_description) .replace('&', '&') From 5e40e9c1343014137124b486ee73b4f2e235c699 Mon Sep 17 00:00:00 2001 From: jomarmontuya Date: Thu, 12 Oct 2023 18:37:28 +0800 Subject: [PATCH 9/9] feat(run format): run format --- .../accounts/ui/select/AccountsComboBox.js | 105 +++++++++--------- src/components/globals/ComboBox.js | 105 +++++++++--------- .../marketing/Join/DancingLogo.module.css | 17 ++- src/pages/_document.js | 11 +- 4 files changed, 122 insertions(+), 116 deletions(-) diff --git a/src/components/accounts/ui/select/AccountsComboBox.js b/src/components/accounts/ui/select/AccountsComboBox.js index b1fe9e332..f8e6d9078 100644 --- a/src/components/accounts/ui/select/AccountsComboBox.js +++ b/src/components/accounts/ui/select/AccountsComboBox.js @@ -57,62 +57,61 @@ function useResetCache(data) { } // Adapter for react-window -const ListboxComponent = React.forwardRef(function ListboxComponent( - props, - ref, -) { - const { children, ...other } = props; - const itemData = []; - children.forEach((item) => { - itemData.push(item); - itemData.push(...(item.children || [])); - }); - - const theme = useTheme(); - const smUp = useMediaQuery(theme.breakpoints.up('sm'), { - noSsr: true, - }); - - const itemCount = itemData.length; - const itemSize = smUp ? 36 : 48; - - const getChildSize = (child) => { - if (child.hasOwnProperty('group')) { - return 48; - } - - return itemSize; - }; +const ListboxComponent = React.forwardRef( + function ListboxComponent(props, ref) { + const { children, ...other } = props; + const itemData = []; + children.forEach((item) => { + itemData.push(item); + itemData.push(...(item.children || [])); + }); + + const theme = useTheme(); + const smUp = useMediaQuery(theme.breakpoints.up('sm'), { + noSsr: true, + }); + + const itemCount = itemData.length; + const itemSize = smUp ? 36 : 48; + + const getChildSize = (child) => { + if (child.hasOwnProperty('group')) { + return 48; + } + + return itemSize; + }; - const getHeight = () => { - if (itemCount > 8) { - return 8 * itemSize; - } - return itemData.map(getChildSize).reduce((a, b) => a + b, 0); - }; + const getHeight = () => { + if (itemCount > 8) { + return 8 * itemSize; + } + return itemData.map(getChildSize).reduce((a, b) => a + b, 0); + }; - const gridRef = useResetCache(itemCount); + const gridRef = useResetCache(itemCount); - return ( -
    - - getChildSize(itemData[index])} - overscanCount={5} - itemCount={itemCount} - > - {renderRow} - - -
    - ); -}); + return ( +
    + + getChildSize(itemData[index])} + overscanCount={5} + itemCount={itemCount} + > + {renderRow} + + +
    + ); + }, +); ListboxComponent.propTypes = { children: PropTypes.node, diff --git a/src/components/globals/ComboBox.js b/src/components/globals/ComboBox.js index 6e9c209ad..7cecb517e 100644 --- a/src/components/globals/ComboBox.js +++ b/src/components/globals/ComboBox.js @@ -55,62 +55,61 @@ function useResetCache(data) { } // Adapter for react-window -const ListboxComponent = React.forwardRef(function ListboxComponent( - props, - ref, -) { - const { children, ...other } = props; - const itemData = []; - children.forEach((item) => { - itemData.push(item); - itemData.push(...(item.children || [])); - }); - - const theme = useTheme(); - const smUp = useMediaQuery(theme.breakpoints.up('sm'), { - noSsr: true, - }); - - const itemCount = itemData.length; - const itemSize = smUp ? 36 : 48; - - const getChildSize = (child) => { - if (child.hasOwnProperty('group')) { - return 48; - } - - return itemSize; - }; +const ListboxComponent = React.forwardRef( + function ListboxComponent(props, ref) { + const { children, ...other } = props; + const itemData = []; + children.forEach((item) => { + itemData.push(item); + itemData.push(...(item.children || [])); + }); + + const theme = useTheme(); + const smUp = useMediaQuery(theme.breakpoints.up('sm'), { + noSsr: true, + }); + + const itemCount = itemData.length; + const itemSize = smUp ? 36 : 48; + + const getChildSize = (child) => { + if (child.hasOwnProperty('group')) { + return 48; + } + + return itemSize; + }; - const getHeight = () => { - if (itemCount > 8) { - return 8 * itemSize; - } - return itemData.map(getChildSize).reduce((a, b) => a + b, 0); - }; + const getHeight = () => { + if (itemCount > 8) { + return 8 * itemSize; + } + return itemData.map(getChildSize).reduce((a, b) => a + b, 0); + }; - const gridRef = useResetCache(itemCount); + const gridRef = useResetCache(itemCount); - return ( -
    - - getChildSize(itemData[index])} - overscanCount={5} - itemCount={itemCount} - > - {renderRow} - - -
    - ); -}); + return ( +
    + + getChildSize(itemData[index])} + overscanCount={5} + itemCount={itemCount} + > + {renderRow} + + +
    + ); + }, +); ListboxComponent.propTypes = { children: PropTypes.node, diff --git a/src/components/marketing/Join/DancingLogo.module.css b/src/components/marketing/Join/DancingLogo.module.css index bb63995a4..3c3ef2160 100644 --- a/src/components/marketing/Join/DancingLogo.module.css +++ b/src/components/marketing/Join/DancingLogo.module.css @@ -30,7 +30,10 @@ } .party { - animation: sway 1s infinite, shake 1s infinite, bounce 1s infinite; + animation: + sway 1s infinite, + shake 1s infinite, + bounce 1s infinite; } .shake { @@ -38,7 +41,9 @@ } .enterScreen { - animation: fadein 2000ms ease-out, enterFromTop 1000ms linear; + animation: + fadein 2000ms ease-out, + enterFromTop 1000ms linear; } .hello { @@ -54,13 +59,17 @@ animation: bounce 1000ms infinite; } .rollIn { - animation: rollIn 1500ms ease-out, spin 1500ms ease-out; + animation: + rollIn 1500ms ease-out, + spin 1500ms ease-out; } .fadeIn { animation: fadein 1000ms ease-out; } .rollOut { - animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite; + animation: + spin 1000ms linear infinite, + moveLeftToRight 5s linear infinite; } .no { diff --git a/src/pages/_document.js b/src/pages/_document.js index efa91767b..865b6db9f 100644 --- a/src/pages/_document.js +++ b/src/pages/_document.js @@ -93,12 +93,11 @@ MyDocument.getInitialProps = async (ctx) => { ctx.renderPage = () => originalRenderPage({ // Take precedence over the CacheProvider in our custom _app.js - enhanceComponent: (Component) => (props) => - ( - - - - ), + enhanceComponent: (Component) => (props) => ( + + + + ), }); const initialProps = await Document.getInitialProps(ctx);