Marketing page update (#2201)

zesty-io · Dec 18, 2023 · 10de4b6 · 10de4b6
2 parents 12897bc + 519f0c4
commit 10de4b6
Show file tree

Hide file tree

Showing 7 changed files with 196 additions and 30 deletions.
diff --git a/public/zoho/forms/newsletter.html b/public/zoho/forms/newsletter.html
@@ -0,0 +1,78 @@
+<!--Zoho Marketing Automation Web-Optin Form's Header Code Starts Here-->
+<script type="text/javascript" src="https://pmga-zgph.maillist-manage.net/js/optin.min.js" onload="setupSF('sf3zd0db9193178cb24b87ac599a05647f1f896fda3bac7bb8c1847b459d91f643bb','ZCFORMVIEW',false,'light')"></script>
+<script type="text/javascript">
+	function runOnFormSubmit_sf3zd0db9193178cb24b87ac599a05647f1f896fda3bac7bb8c1847b459d91f643bb(th){
+		/*Before submit, if you want to trigger your event, "include your code here"*/
+	};
+</script>
+<style>
+.quick_form_8_css * {
+    -webkit-box-sizing: border-box !important;
+    -moz-box-sizing: border-box !important;
+    box-sizing: border-box !important;
+    overflow-wrap: break-word
+}
+@media only screen and (max-width: 600px) {.quick_form_8_css[name="SIGNUP_BODY"] { width: 100% !important; min-width: 100% !important; margin: 0px auto !important; padding: 0px !important } .SIGNUP_FLD { width: 90% !important; margin: 10px 5% !important; padding: 0px !important } .SIGNUP_FLD input { margin: 0 !important; border-radius: 25px !important } }
+</style>
+<!--Zoho Marketing Automation Web-Optin Form's Header Code Ends Here--><!--Zoho Marketing Automation Web-Optin Form Starts Here-->
+<div id="sf3zd0db9193178cb24b87ac599a05647f1f896fda3bac7bb8c1847b459d91f643bb" data-type="signupform">
+	<div style="display:flex; justify-content: center; align-items: center;" id="customForm">
+		<div class="quick_form_8_css" style="border:none;background-color: transparent; width: 350px; z-index: 2; font-family: &quot;Arial&quot;; border-width: 1px;  border-color: rgb(235, 235, 235); overflow: hidden" name="SIGNUP_BODY">
+			<div>
+				<div style="font-family: Arial; font-weight: bold; color: rgb(136, 136, 136); text-align: left; padding: 10px 20px 5px; width: 100%; display: block; font-size: 13px" id="SIGNUP_HEADING">Subscribe to our Newsletter</div>
+				<div style="position:relative;">
+					<div id="Zc_SignupSuccess" style="display:none;position:absolute;margin-left:4%;width:90%;background-color: transparent; padding: 3px; border: none;  margin-top: 10px;margin-bottom:10px;word-break:break-all">
+						<table width="100%" cellpadding="0" cellspacing="0" border="0">
+							<tbody>
+								<tr>
+									<td width="10%">
+										<img class="successicon" src="https://pmga-zgph.maillist-manage.net/images/challangeiconenable.jpg" align="absmiddle" alt="thumsup">
+									</td>
+									<td>
+										<span id="signupSuccessMsg" style="color: rgb(73, 140, 132); font-family: sans-serif; font-size: 14px;word-break:break-word">&nbsp;&nbsp;Thank you for Signing Up</span>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+				<form method="POST" id="zcampaignOptinForm" style="margin: 0px; width: 100%" action="https://pmga-zgph.maillist-manage.net/weboptin.zc" target="_zcSignup">
+					<div style="background-color: rgb(255, 235, 232); padding: 10px; color: rgb(210, 0, 0); font-size: 11px; margin: 20px 10px 0px; border: 1px solid rgb(255, 217, 211); opacity: 1; display: none" id="errorMsgDiv">Please correct the marked field(s) below.</div>
+					<div style="position: relative; margin: 10px 10px 10px; width: 200px; height: 30px; display: inline-block" class="SIGNUP_FLD">
+						<input type="text" style="font-size: 14px; border: 1px solid rgb(221, 221, 221); border-radius: 0; width: 100%; height: 100%; z-index: 4; outline: none; padding: 5px 10px; color: rgb(136, 136, 136); text-align: left; font-family: &quot;Arial&quot;; background-color: rgb(255, 255, 255); box-sizing: border-box" placeholder="Email" changeitem="SIGNUP_FORM_FIELD" name="CONTACT_EMAIL" id="EMBED_FORM_EMAIL_LABEL">
+					</div>
+					<div style="position: relative; margin: 10px; width: 100px; height: 30px; text-align: left; display: inline-block" class="SIGNUP_FLD">
+						<input type="button" style="text-align: center; border-radius: 5px; width: 100%; height: 100%; z-index: 5; border: 0; color: rgb(255, 255, 255); cursor: pointer; outline: none; font-size: 14px; background-color: #FF5D0A; margin: 0; margin-left: -5px" name="SIGNUP_SUBMIT_BUTTON" id="zcWebOptin" value="Join Now">
+					</div>
+					<input type="hidden" id="fieldBorder" value="">
+					<input type="hidden" id="submitType" name="submitType" value="optinCustomView">
+					<input type="hidden" id="emailReportId" name="emailReportId" value="">
+					<input type="hidden" id="formType" name="formType" value="QuickForm">
+					<input type="hidden" name="zx" id="cmpZuid" value="1312a11ef">
+					<input type="hidden" name="zcvers" value="3.0">
+					<input type="hidden" name="oldListIds" id="allCheckedListIds" value="">
+					<input type="hidden" id="mode" name="mode" value="OptinCreateView">
+					<input type="hidden" id="zcld" name="zcld" value="1b26540d64178c27">
+					<input type="hidden" id="zctd" name="zctd" value="">
+					<input type="hidden" id="document_domain" value="">
+					<input type="hidden" id="zc_Url" value="pmga-zgph.maillist-manage.net">
+					<input type="hidden" id="new_optin_response_in" value="0">
+					<input type="hidden" id="duplicate_optin_response_in" value="0">
+					<input type="hidden" name="zc_trackCode" id="zc_trackCode" value="ZCFORMVIEW">
+					<input type="hidden" id="zc_formIx" name="zc_formIx" value="3zd0db9193178cb24b87ac599a05647f1f896fda3bac7bb8c1847b459d91f643bb">
+					<input type="hidden" id="viewFrom" value="URL_ACTION">
+					<span style="display: none" id="dt_CONTACT_EMAIL">1,true,6,Lead Email,2</span>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
+<input type="hidden" id="signupFormType" value="QuickForm_Horizontal">
+<div id="zcOptinOverLay" oncontextmenu="return false" style="display:none;text-align: center; background-color: rgb(0, 0, 0); opacity: 0.5; z-index: 100; position: fixed; width: 100%; top: 0px; left: 0px; height: 988px;"></div>
+<div id="zcOptinSuccessPopup" style="display:none;z-index: 9999;width: 800px; height: 40%;top: 84px;position: fixed; left: 26%;background-color: #FFFFFF;border-color: #E6E6E6; border-style: solid; border-width: 1px;  box-shadow: 0 1px 10px #424242;padding: 35px;">
+	<span style="position: absolute;top: -16px;right:-14px;z-index:99999;cursor: pointer;" id="closeSuccess">
+		<img src="https://pmga-zgph.maillist-manage.net/images/videoclose.png" alt="close">
+	</span>
+	<div id="zcOptinSuccessPanel"></div>
+</div>
+<!--Zoho Marketing Automation Web-Optin Form Ends Here-->
diff --git a/src/blocks/cta/CtaWithInputField/CtaWithInputField.js b/src/blocks/cta/CtaWithInputField/CtaWithInputField.js
@@ -43,7 +43,10 @@ const CtaWithInputField = ({ title, description, cta }) => {
         alignItems={{ xs: 'stretched', sm: 'flex-start' }}
         justifyContent={'center'}
       >
-        <SubscribeCTA text="" />
+        {/* <SubscribeCTA text="" /> */}
+        <Box sx={{width:'100%', display:'flex', justifyContent:'center',alignItems:'center'}}>
+              <iframe src="/zoho/forms/newsletter.html"  width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </Box>
       </Box>
     </Container>
   );

diff --git a/src/components/accounts/dashboard/SideContent.js b/src/components/accounts/dashboard/SideContent.js
@@ -4,12 +4,14 @@ import React, { memo, useEffect, useState } from 'react';
 import * as helpers from 'utils';
 import ZMyListItem from './ui/ZMyListItem';
 import ZSideListContent from './ui/ZSideListContent';
+import { useTheme } from '@mui/material/styles';
 
 import { TOTAL_INSTANCES_LIMIT, TOTAL_TEAMS_LIMIT } from '.';
 
 function SideContent({ initialInstances, unfilteredTotalInstances, teams }) {
   const [filteredInstances, setFilteredInstances] = useState([]);
-
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
   function onChange(e) {
     if (e?.target?.value) {
       handleSearchInstances(e.target.value.toLocaleLowerCase());
@@ -66,7 +68,12 @@ function SideContent({ initialInstances, unfilteredTotalInstances, teams }) {
             color="primary"
             placeholder="Search an Instances"
             onChange={onChange}
-            sx={{ mb: 2 }}
+            sx={{
+              mb: 2,
+              '& .MuiInputBase-root': {
+                bgcolor: isDarkMode && 'transparent',
+              },
+            }}
           />
         }
       >

diff --git a/src/components/accounts/instances/InstanceDashboardV2.js b/src/components/accounts/instances/InstanceDashboardV2.js
@@ -317,7 +317,7 @@ const InstanceDashboardV2 = () => {
         />
 
         <TextField
-          label="Search an instances"
+          placeholder="Search an instances"
           InputProps={{
             endAdornment: (
               <InputAdornment position="start">
@@ -334,6 +334,11 @@ const InstanceDashboardV2 = () => {
             const value = e.target.value?.toLowerCase();
             setSearch(value);
           }}
+          sx={{
+            '& .MuiInputBase-root': {
+              bgcolor: 'transparent',
+            },
+          }}
         />
         <Stack direction="row" spacing={2} alignItems="stretch">
           <CustomMenu

diff --git a/src/components/accounts/ui/input/FormInput.js b/src/components/accounts/ui/input/FormInput.js
@@ -76,6 +76,9 @@ function Index({
                 border: '2px solid #FF5D0A',
               },
             },
+            '& .MuiInputBase-root': {
+              bgcolor: 'transparent',
+            },
           }}
         />
       ) : (
@@ -86,6 +89,7 @@ function Index({
               height: '40px',
               borderRadius: '8px',
               fontSize: '14px',
+
               '& fieldset': {
                 border: '1px solid #F2F4F7',
               },
@@ -96,6 +100,9 @@ function Index({
                 border: '2px solid #FF5D0A',
               },
             },
+            '& .MuiInputBase-root': {
+              bgcolor: 'transparent',
+            },
           }}
           {...defaultProps}
           type={showPassword ? 'text' : 'password'}

diff --git a/src/components/accounts/ui/select/AccountsComboBox.js b/src/components/accounts/ui/select/AccountsComboBox.js
@@ -202,6 +202,9 @@ const Index = ({
                 border: `1px solid ${grey[200]}`,
                 borderRadius: '8px',
               },
+              '& .MuiInputBase-root': {
+                bgcolor: 'transparent',
+              },
             }}
             placeholder={placeholder}
             InputProps={{

diff --git a/src/views/zesty/Article.js b/src/views/zesty/Article.js
@@ -31,7 +31,7 @@
  */
 
 import React from 'react';
-import { Box, Link, Table, useTheme } from '@mui/material';
+import { Box, Button, Container, Link, Table, useTheme } from '@mui/material';
 import FillerContent from 'components/globals/FillerContent';
 import {
   List,
@@ -45,11 +45,11 @@ import { useEffect, useState } from 'react';
 import BlogHero from 'revamp/ui/BlogHero';
 import revampTheme from 'theme/revampTheme';
 import dayjs from 'dayjs';
-import Zoom from 'react-medium-image-zoom';
 import 'react-medium-image-zoom/dist/styles.css';
 import AuthorSection from 'revamp/ui/AuthorSection';
 import useFetch from 'components/hooks/useFetch';
 import BlogContent from 'revamp/ui/BlogContent';
+import { CtaWithInputField } from 'blocks/cta';
 
 function Article({ content }) {
   const [newContent, setNewContent] = useState(content.article);
@@ -60,20 +60,9 @@ function Article({ content }) {
     content.zestyProductionMode,
   );
 
-  // const {
-  //   data: tagArticles,
-  //   //  isPending: tagsPending
-  // } = useFetch(
-  //   `/-/similar-articles.json?limit=4&tag=${simliarTags}`,
-  //   content.zestyProductionMode,
-  // );
-
   const removeErrorHandlingString = /Error hydrating/gi;
   let cleanOutErrorHydrating;
 
-  // Check if "Error hydrating" is being injected and clean out
-  // Skip if wysiwyg is empty to avoid error
-
   const authorImage =
     content.author?.data[0]?.headshot?.data[0]?.url || FillerContent.image;
   const authorName = content.author?.data[0]?.name || FillerContent.header;
@@ -91,6 +80,9 @@ function Article({ content }) {
     link: c?.meta?.web?.uri,
   }));
 
+  // Define a regular expression pattern to match [_CTA_]
+  let regexPattern = /\[CALL TO ACTION\]/g;
+
   useEffect(() => {
     const validateWysiwyg = () => {
       if (newContent?.includes('Error hydrating')) {
@@ -109,15 +101,14 @@ function Article({ content }) {
       txt.innerHTML = str;
       return txt.value;
     }
-    setNewContent(decode(validateWysiwyg()));
+    setNewContent(
+      decode(validateWysiwyg()).replace(
+        regexPattern,
+        '<acronym title="Call to Action"></acronym>',
+      ),
+    );
   }, []);
 
-  const MyZoomImg = ({ _children, ...props }) => (
-    <Zoom wrapElement="span">
-      <Box component="img" {...props} />
-    </Zoom>
-  );
-
   return (
     <Box>
       <ThemeProvider theme={() => revampTheme(palette.mode)}>
@@ -154,6 +145,15 @@ function Article({ content }) {
             <MuiMarkdown
               options={{
                 overrides: {
+                  acronym: {
+                    component: CtaComponent,
+                    props: {
+                      title: content?.cta_title,
+                      description: content?.cta_description,
+                      ctaText: content?.cta_text,
+                      ctaLink: content?.cta_link,
+                    },
+                  },
                   p: {
                     component: Typography,
                     props: {
@@ -366,7 +366,7 @@ function Article({ content }) {
                     },
                   },
                   img: {
-                    component: MyZoomImg,
+                    component: 'img',
                     props: {
                       style: {
                         marginTop: '48px',
@@ -412,7 +412,7 @@ function Article({ content }) {
                             listStyleType: 'auto',
                           },
                           mx: 3,
-                          // pl: 2,
+
                           '& ul': {
                             mt: '12px',
                             mx: 2,
@@ -425,7 +425,6 @@ function Article({ content }) {
                           px: 0,
                           '& ul': {
                             mx: 2,
-                            // pl: 2,
                           },
                         },
                       }),
@@ -444,7 +443,7 @@ function Article({ content }) {
                             display: 'list-item',
                             listStyleType: 'auto',
                           },
-                          // pl: 2,
+
                           mx: 3,
                         },
                         [theme.breakpoints.up('tablet')]: {
@@ -504,8 +503,6 @@ function Article({ content }) {
                         mt: '20px',
                         '& img, span': {
                           mt: '0px !important',
-                          // p: 1,
-                          // maxWidth: 'auto !important',
                           objectFit: 'contain',
                           height: '240px',
                         },
@@ -575,8 +572,74 @@ function Article({ content }) {
           <BlogContent title="Related Articles" articles={latestArticles} />
         </Stack>
       </ThemeProvider>
+
+      {content?.enable_newsletter_subscription === '1' && (
+        <Container position="relative" zIndex={3}>
+          <CtaWithInputField
+            title={'Subscribe to the zestiest newsletter in the industry'}
+            description={
+              'Get the latest from the Zesty team, from whitepapers to product updates.'
+            }
+            cta={'Subscribe'}
+          />
+        </Container>
+      )}
     </Box>
   );
 }
 
 export default Article;
+
+function CtaComponent({ title, description, ctaText, ctaLink }) {
+  return (
+    <>
+      {title && description && (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            padding: 4,
+            gap: 2,
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: 'auto',
+            width: '100%',
+            backgroundColor: '#f0f0f0',
+            borderRadius: '8px',
+            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+            textAlign: 'center',
+          }}
+        >
+          <Typography variant="h5" fontWeight={700} color="primary">
+            {title || ''}
+          </Typography>
+          <MuiMarkdown
+            options={{
+              overrides: {
+                p: {
+                  component: Typography,
+                  props: {
+                    variant: 'body1',
+                    color: 'text.secondary',
+                  },
+                },
+              },
+            }}
+          >
+            {description || ''}
+          </MuiMarkdown>
+
+          <Button
+            target="_blank"
+            href={ctaLink || ''}
+            component="a"
+            variant="contained"
+            color="primary"
+          >
+            {ctaText || ''}
+          </Button>
+        </Box>
+      )}
+    </>
+  );
+}