From 25c018c61dbc402a9c7b4b76b59ee0a86aedaf62 Mon Sep 17 00:00:00 2001 From: Santhoshkumar <117272529+Santhosh2022ts@users.noreply.github.com> Date: Fri, 26 May 2023 19:22:20 +0530 Subject: [PATCH 1/2] Moved product subscription form to HubSpot form on tutorials (#46) --- src/components/Footer.scss | 119 ++++++++++++++++++++------ src/components/SubscribeButton.jsx | 133 ++++++++--------------------- 2 files changed, 127 insertions(+), 125 deletions(-) diff --git a/src/components/Footer.scss b/src/components/Footer.scss index 056d06d..2c81803 100644 --- a/src/components/Footer.scss +++ b/src/components/Footer.scss @@ -75,7 +75,7 @@ } .footer_greenbox{ - margin-top: 30px; + margin-top: 3.5rem; background-color: #CDF0EA; margin-bottom: 20px; display: -webkit-box; @@ -85,44 +85,27 @@ display: flex; padding: 18px 18px 18px 28px; border-radius: 6px; + flex-direction: column; @media (max-width: 576px) { display: block; padding: 18px; } .green_text{ - font-size: 16px; + font-size: 18px; line-height: 26px; font-weight: bold; - text-align: initial; - padding-left: 15px; + text-align: center; padding-right: 20px; margin-top: 3px; margin-bottom: 0px; } - form{ - margin-top: -15px; - input{ - height: 40px; - margin-top: 11px; + .flex_item { + width: 60%; + max-width: 60%; + margin: auto; + @media only screen and (max-width: 767px) { width: 100%; - padding-left: 40px; - padding-right: 15px; - border-radius: 4px; - &:focus{ - outline: none; - } - &::placeholder{ - position: relative; - left: 0px; - color: #cacaca; - font-size: 15px; - } - } - svg{ - display: block; - position: relative; - top: 39px; - left: 15px; + max-width: 100%; } } .btn_width{ @@ -183,6 +166,88 @@ } } } +#hubspot-form-wrapper{ + padding: 1rem 0; + padding-left: 1rem; + @media only screen and (max-width: 767px) { + padding-left: 0; + } + fieldset{ + .hs-form-field{ + padding: 0.7rem 0; + label{ + span{ + height: 18px; + color: #666779; + font-size: 16px; + font-weight: 500; + letter-spacing: 0px; + margin-left: 1px; + margin-bottom: 12px; + line-height: 18px; + text-align: center; + } + .hs-form-required{ + color: #FE6B6B; + } + } + .input{ + @media only screen and (max-width: 767px) { + margin: 0; + } + input{ + box-sizing: border-box; + height: 44px; + border: 1px solid #EEEEEE; + border-radius: 3px; + background-color: #FFF; + box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03); + @media only screen and (max-width: 767px) { + max-width: 100%; + width: 100%; + } + } + } + } + } + .hs_recaptcha{ + display: none; + } + .hs_submit{ + .actions{ + input[type="submit"]{ + color: #FFF; + margin-top: 11px; + margin-left: 0px; + background: #03A973 !important; + border: 1px solid #03A973 !important; + max-width: 100%; + width: 92%; + height: 40px; + border-radius: 4px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + line-height: 39px; + text-align: center; + justify-content: center; + align-items: center; + font-size: 1.3rem; + -webkit-transition: 0.5s; + -moz-transition: 0.5s; + -ms-transition: 0.5s; + -o-transition: 0.5s; + transition: 0.5s; + cursor: pointer; + padding-left: 20px; + padding-right: 20px; + @media (max-width: 576px) { + right: 0; + min-width: 100%; + } + } + } + } +} .footer_greyBox{ margin-top: 30px; diff --git a/src/components/SubscribeButton.jsx b/src/components/SubscribeButton.jsx index 6489855..ae7d63c 100644 --- a/src/components/SubscribeButton.jsx +++ b/src/components/SubscribeButton.jsx @@ -1,105 +1,42 @@ -import React, { Component } from 'react'; -import ReCAPTCHA from "react-google-recaptcha"; -import axios from 'axios'; - -class SubscribeButton extends Component { - constructor(props) { - super(props); - - this.state = { - subscribed: false, - }; - this._reCaptchaRef = React.createRef(); - } +import React, { useEffect, useRef } from 'react'; +const SubscribeButton = () => { + const formRef = useRef(null); - subscribeNewsletters = async (e) => { - e.preventDefault(); - const CONTACT_LIST_API = 'https://staging.testsigma.com/api/website/contacts'; - const email = document.getElementById('email').value; - const emailError = document.getElementById('email_error'); - let trimmedURL = window.location.href; + useEffect(() => { + const script = document.createElement('script'); + script.src = '//js.hsforms.net/forms/embed/v2.js'; + script.charset = 'utf-8'; + script.type = 'text/javascript'; + script.async = true; + document.body.appendChild(script); - if (trimmedURL.length > 250) - trimmedURL = window.location.href.substr(0, 240)+"..."; + script.addEventListener('load', () => { + if (window.hbspt && window.hbspt.forms) { + window.hbspt.forms.create({ + region: "na1", + portalId: "23341221", + formId: "87576ba1-bb40-433e-9257-4af82e747a6e", + target: "#hubspot-form-wrapper", + }); + } + }); - const regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; - - emailError.style.display = "none"; - if (!regex.test(email)) { - emailError.style.display = "block"; - return false; - } else { - this._reCaptchaRef.current.executeAsync().then(value => { - if (value) { - const formData = { - 'CATEGORY': 'Product Updates', - 'LSOURCE': 'Tutorials', - 'UPDATES': '', - 'URL': trimmedURL, - 'add_tags_immediately': false, - 'email': email, - 'g-recaptcha-response': value, - 'list_id' : 'bec00ef235', - 'tags': ['Product Updates'] - }; - - axios({ - method: 'POST', - url: CONTACT_LIST_API, - data: formData, - headers: { "Content-Type": "application/json; charset=UTF-8" }, - }) - .then(function (response) { - // handle success - this.setState({ subscribed: true }); - }.bind(this)) - .catch(function (response) { - // handle error - console.error("Failed: ", response); - }); - } - }); - } - } + return () => { + document.body.removeChild(script); + }; + }, []); - render() { - return ( - <> -
-
-

- Stay up to date with product updates & news -

-
-
-
- - - - -
-

Please fill out this field.

-
-
- - -
-
-

- You're now subscribed to our monthly product updates. -

-
-
- - ); - } -} + return ( +
+
+

+ Stay up to date with product updates & news +

+
+
+
+ ); +}; export default SubscribeButton; From e4f08efd6d0180c1766abb65745927115fc9f7eb Mon Sep 17 00:00:00 2001 From: PratheepV Date: Sat, 27 May 2023 21:47:50 +0530 Subject: [PATCH 2/2] Staging Movement to separate stack --- .github/workflows/staging-cd.yml | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/.github/workflows/staging-cd.yml b/.github/workflows/staging-cd.yml index 893ef4d..1351da7 100644 --- a/.github/workflows/staging-cd.yml +++ b/.github/workflows/staging-cd.yml @@ -22,16 +22,16 @@ jobs: - name: 'Create env file' run: | touch .env - echo GATSBY_ALGOLIA_APP_ID=${{ secrets.STAGING_GATSBY_ALGOLIA_APP_ID }} >> .env - echo GATSBY_ALGOLIA_SEARCH_KEY=${{ secrets.STAGING_GATSBY_ALGOLIA_SEARCH_KEY }} >> .env - echo ALGOLIA_ADMIN_KEY=${{ secrets.STAGING_ALGOLIA_ADMIN_KEY }} >> .env - echo BUCKET_NAME=${{ secrets.STAGING_BUCKET_NAME }} >> .env - echo HOST_NAME=${{ secrets.STAGING_HOST_NAME }} >> .env - echo ASSET_HOST=${{ secrets.STAGING_ASSET_HOST }} >> .env - echo FRESHCHAT_TOKEN=${{ secrets.STAGING_FRESHCHAT_TOKEN }} >> .env - echo GA_TRACKING_ID=${{ secrets.STAGING_GA_TRACKING_ID }} >> .env - echo GTAG_TRACKING_ID_FOR_GA4=${{ secrets.STAGING_GTAG_TRACKING_ID_FOR_GA4 }} >> .env - echo GTAG_TRACKING_ID_FOR_GTAG=${{ secrets.STAGING_GTAG_TRACKING_ID_FOR_GTAG }} >> .env + echo GATSBY_ALGOLIA_APP_ID=${{ secrets.WEBSITE_STAGING_GATSBY_ALGOLIA_APP_ID }} >> .env + echo GATSBY_ALGOLIA_SEARCH_KEY=${{ secrets.WEBSITE_STAGING_GATSBY_ALGOLIA_SEARCH_KEY }} >> .env + echo ALGOLIA_ADMIN_KEY=${{ secrets.WEBSITE_STAGING_ALGOLIA_ADMIN_KEY }} >> .env + echo BUCKET_NAME=${{ secrets.WEBSITE_STAGING_BUCKET_NAME }} >> .env + echo HOST_NAME=${{ secrets.WEBSITE_STAGING_HOST_NAME }} >> .env + echo ASSET_HOST=${{ secrets.WEBSITE_STAGING_ASSET_HOST }} >> .env + echo FRESHCHAT_TOKEN=${{ secrets.WEBSITE_STAGING_FRESHCHAT_TOKEN }} >> .env + echo GA_TRACKING_ID=${{ secrets.WEBSITE_STAGING_GA_TRACKING_ID }} >> .env + echo GTAG_TRACKING_ID_FOR_GA4=${{ secrets.WEBSITE_STAGING_GTAG_TRACKING_ID_FOR_GA4 }} >> .env + echo GTAG_TRACKING_ID_FOR_GTAG=${{ secrets.WEBSITE_STAGING_GTAG_TRACKING_ID_FOR_GTAG }} >> .env cat .env - name: Set environment run : sed -i 's/localhost/website.testsigma.com/g' src/environment.ts @@ -39,7 +39,7 @@ jobs: run: | PREFIX_PATHS=true npm run build && npm run deploy env: - AWS_ACCESS_KEY_ID: ${{ secrets.STAGING_AWS_ACCESS_KEY_ID }} - AWS_SECRET_ACCESS_KEY: ${{ secrets.STAGING_AWS_SECRET_ACCESS_KEY }} + AWS_ACCESS_KEY_ID: ${{ secrets.WEBSITE_STAGING_AWS_ACCESS_KEY_ID }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.WEBSITE_STAGING_AWS_SECRET_ACCESS_KEY }} AWS_DEFAULT_REGION: 'us-east-1' AWS_DEFAULT_OUTPUT: json