diff --git a/src/app/components/webinars-banner/index.js b/src/app/components/webinars-banner/index.js new file mode 100644 index 000000000..7bb7c8bb4 --- /dev/null +++ b/src/app/components/webinars-banner/index.js @@ -0,0 +1,146 @@ +import { useState, useEffect } from "@wordpress/element"; +import { Button, Title } from "@newfold/ui-component-library"; +import { ArrowRightIcon, CalendarIcon, ClockIcon } from "@heroicons/react/24/outline"; +import { ReactComponent as WebinarsVector } from 'App/images/webinars-vector.svg'; +import { SectionContainer, SectionContent } from 'App/components/section'; + +/** + * A component that displays the next monthly webinar. + * + * The component will attempt to fetch the webinars data from the Hiive CDN. + * If the file is fetched successfully, the component will verify the required shape of the data. + * When the data is valid, the component will filter the webinars to only include next webinar. + * The component will then render the next webinar. + * + * If any of the above fails the component will not render. + * + * @returns JSX.Element + */ +const WebinarsBanner = () => { + const [webinars, setWebinars] = useState([]); + const [nextWebinar, setNextWebinar] = useState(null); + + useEffect(() => { + fetchWebinars(); + }, []); + + const fetchWebinars = async () => { + const webinarsEndpoint = 'https://cdn.hiive.space/resources/bluehost-webinars.json'; + + const response = await fetch(webinarsEndpoint); + if (!response.ok) { + console.warn('Could not fetch webinars data.'); + return; + } + + const data = await response.json(); + if ( + data.hasOwnProperty('isActive') && + data.isActive && + data.hasOwnProperty('items') && + Array.isArray(data.items) && + data.items.length > 0 + ) { + setWebinars(data.items); + } + } + + useEffect(() => { + setNextWebinar(getNextWebinar()); + }, [webinars]); + + const getNextWebinar = () => { + const currentDate = new Date(); + + const futureWebinars = webinars.filter(webinar => new Date(webinar.date) > currentDate); + if (futureWebinars.length === 0) { + return null; + } + futureWebinars.sort((a, b) => new Date(a.date) - new Date(b.date)); + + const nextWebinar = futureWebinars[0]; + if (nextWebinar.hasOwnProperty('title') && nextWebinar.title.length > 0) { + nextWebinar.hasDescription = nextWebinar.description ? true : false; + nextWebinar.hasTopics = (nextWebinar.hasOwnProperty('topics') && Array.isArray(nextWebinar.topics) && nextWebinar.topics.length > 0) ? true : false; + nextWebinar.hasTime = nextWebinar.time ? true : false; + nextWebinar.link = nextWebinar.link ?? 'https://www.bluehost.com/blog/events/'; + nextWebinar.ctaText = nextWebinar.ctaText ?? 'Register Now'; + + return nextWebinar; + } + + return null; + } + + const WebinarListItem = ({ children }) => { + return ( +
  • + • + {children} +
    • + ); + } + + if (!nextWebinar) { + return null; + } + + return ( + + +
    +
    + +
    + +
    + FREE Monthly Webinar: {nextWebinar.title} + + {(nextWebinar.hasDescription || nextWebinar.hasTopics) && +
    + {nextWebinar.description &&

    {nextWebinar.description}

    } + {nextWebinar.topics && + <> + Topics: +
      + {nextWebinar.topics.map((topic, index) => {topic})} +
    + + } +
    + } + + +
    +
    + + {nextWebinar.date} +
    + {nextWebinar.hasTime && +
    + + {nextWebinar.time} +
    + } +
    + +
    + +
    + +
    +
    +     +     + ); +} + +export default WebinarsBanner; \ No newline at end of file diff --git a/src/app/images/webinars-vector.svg b/src/app/images/webinars-vector.svg new file mode 100644 index 000000000..a7d422990 --- /dev/null +++ b/src/app/images/webinars-vector.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/pages/home/index.js b/src/app/pages/home/index.js index cf1ffef8d..7df5f3d50 100644 --- a/src/app/pages/home/index.js +++ b/src/app/pages/home/index.js @@ -1,5 +1,6 @@ import { Page } from '../../components/page'; import { SectionContainer, SectionContent } from '../../components/section'; +import WebinarsBanner from 'App/components/webinars-banner'; import { AccountCard } from './accountCard'; import { HelpCard } from './helpCard'; import './stylesheet.scss'; @@ -9,6 +10,7 @@ const Home = () => { return ( +
    diff --git a/tests/cypress/fixtures/webinars-inactive.json b/tests/cypress/fixtures/webinars-inactive.json new file mode 100644 index 000000000..757996293 --- /dev/null +++ b/tests/cypress/fixtures/webinars-inactive.json @@ -0,0 +1,40 @@ +{ + "items": [ + { + "title": "Maximize Productivity with Time Management", + "description" : "Phasellus sagittis gravida molestie. Vivamus dictum, massa luctus tempus imperdiet, ligula leo ultrices purus, sit amet consectetur ligula turpis non nisi.", + "date": "November 15, 2022", + "time": "2pm - 3pm EST", + "ctaText": "Sign Up Today", + "link": "https://www.bluehost.com/blog/events/how-to-start-with-seo-yoast/" + }, + { + "title": "Build your brand with WordPress", + "description": "Join us for a free webinar on how to build your brand with WordPress.", + "topics": [ + "Explore SEO and WordPress", + "Gain valuable tips for building your brand", + "Content marketing", + "eCommerce integration" + ], + "date": "August 31, 2040", + "time": "1pm - 2pm EST", + "ctaText": "Register Now", + "link": "https://www.bluehost.com/blog/events/next-event-post" + }, + { + "title": "Mastering the Art of Public Speaking", + "topics": [ + "Overcoming stage fright and nervousness", + "Crafting compelling speeches and presentations", + "Engaging your audience effectively", + "Tips for confident and impactful public speaking" + ], + "date": "December 10, 2050", + "time": "3pm - 4pm EST", + "ctaText": "Enroll Now", + "link": "https://www.bluehost.com/blog/events/yoast-seo-news-october-edition/" + } + ], + "isActive": false +} \ No newline at end of file diff --git a/tests/cypress/fixtures/webinars-past.json b/tests/cypress/fixtures/webinars-past.json new file mode 100644 index 000000000..7e335f10f --- /dev/null +++ b/tests/cypress/fixtures/webinars-past.json @@ -0,0 +1,40 @@ +{ + "items": [ + { + "title": "Maximize Productivity with Time Management", + "description" : "Phasellus sagittis gravida molestie. Vivamus dictum, massa luctus tempus imperdiet, ligula leo ultrices purus, sit amet consectetur ligula turpis non nisi.", + "date": "November 15, 2022", + "time": "2pm - 3pm EST", + "ctaText": "Sign Up Today", + "link": "https://www.bluehost.com/blog/events/how-to-start-with-seo-yoast/" + }, + { + "title": "Build your brand with WordPress", + "description": "Join us for a free webinar on how to build your brand with WordPress.", + "topics": [ + "Explore SEO and WordPress", + "Gain valuable tips for building your brand", + "Content marketing", + "eCommerce integration" + ], + "date": "August 31, 2022", + "time": "1pm - 2pm EST", + "ctaText": "Register Now", + "link": "https://www.bluehost.com/blog/events/next-event-post" + }, + { + "title": "Mastering the Art of Public Speaking", + "topics": [ + "Overcoming stage fright and nervousness", + "Crafting compelling speeches and presentations", + "Engaging your audience effectively", + "Tips for confident and impactful public speaking" + ], + "date": "December 10, 2022", + "time": "3pm - 4pm EST", + "ctaText": "Enroll Now", + "link": "https://www.bluehost.com/blog/events/yoast-seo-news-october-edition/" + } + ], + "isActive": true +} \ No newline at end of file diff --git a/tests/cypress/fixtures/webinars.json b/tests/cypress/fixtures/webinars.json new file mode 100644 index 000000000..1da2da14b --- /dev/null +++ b/tests/cypress/fixtures/webinars.json @@ -0,0 +1,40 @@ +{ + "items": [ + { + "title": "Maximize Productivity with Time Management", + "description" : "Phasellus sagittis gravida molestie. Vivamus dictum, massa luctus tempus imperdiet, ligula leo ultrices purus, sit amet consectetur ligula turpis non nisi.", + "date": "November 15, 2022", + "time": "2pm - 3pm EST", + "ctaText": "Sign Up Today", + "link": "https://www.bluehost.com/blog/events/how-to-start-with-seo-yoast/" + }, + { + "title": "Build your brand with WordPress", + "description": "Join us for a free webinar on how to build your brand with WordPress.", + "topics": [ + "Explore SEO and WordPress", + "Gain valuable tips for building your brand", + "Content marketing", + "eCommerce integration" + ], + "date": "August 31, 2040", + "time": "1pm - 2pm EST", + "ctaText": "Register Now", + "link": "https://www.bluehost.com/blog/events/next-event-post" + }, + { + "title": "Mastering the Art of Public Speaking", + "topics": [ + "Overcoming stage fright and nervousness", + "Crafting compelling speeches and presentations", + "Engaging your audience effectively", + "Tips for confident and impactful public speaking" + ], + "date": "December 10, 2050", + "time": "3pm - 4pm EST", + "ctaText": "Enroll Now", + "link": "https://www.bluehost.com/blog/events/yoast-seo-news-october-edition/" + } + ], + "isActive": true +} \ No newline at end of file diff --git a/tests/cypress/integration/home.cy.js b/tests/cypress/integration/home.cy.js index 1927225b6..429dee3d7 100644 --- a/tests/cypress/integration/home.cy.js +++ b/tests/cypress/integration/home.cy.js @@ -51,4 +51,83 @@ describe('Home Page', function () { .should('be.visible'); }); + it('Webinars Section Exists', () => { + cy.intercept( + 'https://cdn.hiive.space/resources/bluehost-webinars.json', + { fixture: 'webinars.json' } + ); + cy.reload(); + cy + .get('.wppbh-webinars-banner-section').contains('h2', 'FREE Monthly Webinar: Build your brand with WordPress') + .scrollIntoView() + .should('be.visible'); + }); + + it('Webinars Section Renders Correctly', () => { + // Title + cy + .get('.wppbh-webinars-banner-section') + .contains('h2', 'FREE Monthly Webinar: Build your brand with WordPress') + .scrollIntoView() + .should('be.visible'); + + // Description + cy + .get('.wppbh-webinars-banner-section p:first-of-type') + .contains('Join us for a free webinar on how to build your brand with WordPress.') + .scrollIntoView() + .should('be.visible'); + + // Topics + cy + .get('.wppbh-webinars-banner-section h3') + .contains('Topics:') + .scrollIntoView() + .should('be.visible'); + + // Date + cy + .get('.wppbh-webinars-banner-section') + .contains('August 31, 2040') + .scrollIntoView() + .should('be.visible'); + + // Time + cy + .get('.wppbh-webinars-banner-section') + .contains('1pm - 2pm EST') + .scrollIntoView() + .should('be.visible'); + + // CTA + cy + .get('.wppbh-webinars-banner-section a:first-of-type') + .contains('Register Now') + .scrollIntoView() + .should('be.visible') + .should('have.attr', 'href') + .and('include', 'https://www.bluehost.com/blog/events/next-event-post'); + }); + + it('Webinars Section Doesn\'t Render When Active Propety is False', () => { + cy.intercept( + 'https://cdn.hiive.space/resources/bluehost-webinars.json', + { fixture: 'webinars-inactive.json' } + ); + cy.reload(); + cy + .get('.wppbh-webinars-banner-section') + .should('not.exist'); + }); + + it('Webinars Section Doesn\'t Render Items Are in the Past', () => { + cy.intercept( + 'https://cdn.hiive.space/resources/bluehost-webinars.json', + { fixture: 'webinars-past.json' } + ); + cy.reload(); + cy + .get('.wppbh-webinars-banner-section') + .should('not.exist'); + }); });