feat: integrate Wistia analytics in Video Learning Hub page (#2435)

# Description

Integrate Wistia analytics in Video Learning Hub page

Fixes #2432

## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce.

- [x] Manual Test

# Screenshots / Screen recording

![image](https://github.com/zesty-io/website/assets/83058948/fef8743e-bde1-4957-be2a-e8be2675d816)

![image](https://github.com/zesty-io/website/assets/83058948/c078b506-1c7f-4252-b1c1-c2d320e6455f)

src/components/marketing/LearningHub/FeaturedVideos.js

@@ -8,6 +8,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
  * Components Imports
  */
 import VideoCard from './FeaturedCard';
+import WistiaVideoCard from './FeaturedWistiaCard';
 
 /**
  * React Imports
@@ -51,7 +52,11 @@ const FeaturedVideos = ({ title, featuredVideos = [] }) => {
               return (
                 <Grid key={idx} item xs={12} md={6} lg={4}>
                   <Box sx={{ textDecoration: 'none' }}>
-                    <VideoCard {...item} />
+                    {item?.youtube_link ? (
+                      <VideoCard {...item} />
+                    ) : (
+                      <WistiaVideoCard {...item} />
+                    )}
                   </Box>
                 </Grid>
               );

src/components/marketing/LearningHub/FeaturedWistiaCard.js

@@ -0,0 +1,96 @@
+/**
+ * MUI Imports
+ */
+import { Box, Card, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useEffect } from 'react';
+
+const WistiaVideoCard = ({
+  title,
+  wistia_video_id,
+  published_date,
+  video_length,
+}) => {
+  const theme = useTheme();
+
+  const formatDate = (date) => {
+    date = new Date(date);
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    return date.toLocaleDateString('en-US', options);
+  };
+
+  useEffect(() => {
+    const script1 = document.createElement('script');
+    script1.src = `https://fast.wistia.com/embed/medias/${wistia_video_id}.jsonp`;
+    script1.async = true;
+
+    const script2 = document.createElement('script');
+    script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
+    script2.async = true;
+
+    document.body.appendChild(script1);
+    document.body.appendChild(script2);
+
+    return () => {
+      document.body.removeChild(script1);
+      document.body.removeChild(script2);
+    };
+  }, [wistia_video_id]);
+
+  return (
+    <Box sx={{ textDecoration: 'none' }}>
+      <Card
+        sx={{
+          '&:hover': {
+            border: `1px solid ${theme.palette.zesty.zestyOrange}`,
+          },
+          margin: 'auto',
+          width: '100%',
+          minHeight: 280,
+          background: '#000',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          border:
+            theme.palette.mode === 'light' &&
+            `1px solid ${theme.palette.common.grey}`,
+        }}
+      >
+        <Box
+          sx={{
+            position: 'relative',
+            overflow: 'hidden',
+            paddingTop: '56.25%',
+            height: '100%',
+            width: '100%',
+          }}
+        >
+          <Box
+            className={`wistia_embed wistia_async_${wistia_video_id} popover=true videoFoam=true`}
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+          />
+        </Box>
+      </Card>
+
+      <Typography component="h4" variant="body1" sx={{ fontWeight: 'bold' }}>
+        {title}
+      </Typography>
+      {video_length && (
+        <Typography component="p" variant="subtitle2">
+          {video_length}
+        </Typography>
+      )}
+      <Typography component="p" variant="subtitle2">
+        {formatDate(published_date)}
+      </Typography>
+    </Box>
+  );
+};
+
+export default WistiaVideoCard;

src/components/marketing/LearningHub/Filters.js

@@ -18,7 +18,7 @@ import CloseIcon from '@mui/icons-material/Close';
 /**
  * React Imports
  */
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { LearningHubVideosContext } from './context/LearningHubVideosContext';
 
 const Filters = ({ featuredCards, tags }) => {
@@ -33,6 +33,16 @@ const Filters = ({ featuredCards, tags }) => {
     LearningHubVideosContext,
   );
 
+  const scrollToVideos = () => {
+    document.getElementById('scrollTop').scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (selectedTags) {
+      scrollToVideos();
+    }
+  }, [selectedTags]);
+
   return (
     <Container>
       <Grid
@@ -73,7 +83,9 @@ const Filters = ({ featuredCards, tags }) => {
                   ? theme.palette.zesty.zestyBlue
                   : theme.palette.background.paper,
               }}
-              onClick={() => setSelectedTags(item.title)}
+              onClick={() => {
+                setSelectedTags(item.title);
+              }}
             >
               <Typography
                 sx={{
@@ -122,7 +134,9 @@ const Filters = ({ featuredCards, tags }) => {
         {tags.map((item, idx) => (
           <Grid key={idx} item sm={6} md={4} lg={2}>
             <Box
-              onClick={() => setSelectedTags(item.tag_name)}
+              onClick={() => {
+                setSelectedTags(item.tag_name);
+              }}
               sx={{
                 textDecoration: 'none',
                 border: item.isActive

src/views/zesty/LearningHub.js

@@ -59,7 +59,7 @@ function LearningHub({ content }) {
         <Box sx={{ pt: 10 }}>
           <FeaturedVideos
             title="Featured Videos"
-            featuredVideos={content?.featured_videos?.data}
+            featuredVideos={content?.featured_wistia_videos?.data}
           />
         </Box>
         <MainVideos withPagination={true} />