Feat/newsletter component

gatsby-config.js

@@ -106,5 +106,12 @@ module.exports = {
         isEnabledDevMode: true
       }
     },
+    {
+      resolve: 'gatsby-plugin-mailchimp',
+      options: {
+          endpoint: 'https://hummingbot.us9.list-manage.com/subscribe/post?u=548b8c3eb87a1b029fd4f9f2b&id=b726be68bd&f_id=003621e1f0',
+          timeout: 3500, // amount of time, in milliseconds, that you want to allow mailchimp to respond to your request before timing out
+      },
+    },
   ],
 }

package.json

@@ -13,13 +13,14 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@hummingbot/hbui": "1.8.27",
+    "@hummingbot/hbui": "1.9.6",
     "dotenv": "^16.0.1",
     "gatsby": "^4.3.0",
     "gatsby-plugin-amplitude": "^0.1.0",
     "gatsby-plugin-favicons": "^2.0.0",
     "gatsby-plugin-google-tagmanager": "^4.23.0",
     "gatsby-plugin-image": "^2.17.0",
+    "gatsby-plugin-mailchimp": "^5.2.2",
     "gatsby-plugin-manifest": "^4.17.0",
     "gatsby-plugin-posthog": "^1.0.1",
     "gatsby-plugin-react-helmet": "^5.17.0",

src/pages/botcamp.js

@@ -3,6 +3,7 @@ import Layout from '../ui/components/Layout'
 import Navigation from '../ui/components/Navigation'
 import { Section } from '@hummingbot/hbui/elements/layout'
 import BotcampHero from '../ui/components/botcamp/BotcampHero'
+import GetNewsletter from '../ui/components/botcamp/GetNewsletter'
 import WhyBotcamp from '../ui/components/botcamp/WhyBotCamp'
 import Testimonials from '../ui/components/botcamp/Testimonials'
 import BotcampContent from '../ui/components/botcamp/Content'

src/ui/components/botcamp/BotcampCTA.js

@@ -4,6 +4,7 @@ import tw, { styled, css } from 'twin.macro'
 import { Section, Container, Separator } from '@hummingbot/hbui/elements/layout'
 import { P, H1, H2, H4, H6 } from '@hummingbot/hbui/elements/typography'
 import { Button } from '@hummingbot/hbui/elements/buttons'
+import GetNewsletter from './GetNewsletter'
 
 function BotcampCTA() {
   return (
@@ -25,6 +26,7 @@ function BotcampCTA() {
         </div>
 
     </Container>
+    <GetNewsletter />
   </Section>
   )
 }

src/ui/components/botcamp/BotcampHero.js

@@ -1,16 +1,17 @@
 /* eslint no-unused-vars: [ "off", { "argsIgnorePattern": "tw" } ] */
 import React from 'react'
 import tw, { styled } from 'twin.macro'
-import { Section, Container, Separator } from '@hummingbot/hbui/elements/layout'
+import { Section, Container } from '@hummingbot/hbui/elements/layout'
 import { P, H1, H5 } from '@hummingbot/hbui/elements/typography'
 import { Button } from '@hummingbot/hbui/elements/buttons'
 import VideoCard from '@hummingbot/hbui/components/video/VideoCard'
+import GetNewsletter from './GetNewsletter'
 
 function BotcampHero() {
   return (
     <Section tw='border-b-4 border-terminal' style={{background: 'linear-gradient(177deg, black, rgba(95, 255, 215, 0.3))'}}>
-      <Container tw='py-xxxl text-center'>
-        <H1 isBold tw='leading-tight'>
+      <Container tw='pt-xxxl pb-md text-center'>
+        <H1 isBold tw='mt-xxl leading-tight'>
           Hummingbot 
           <span tw='text-terminal'> Botcamp</span>
         </H1>
@@ -20,26 +21,27 @@ function BotcampHero() {
           with our hands-on, small-batch online course
         </H5>
 
-        <div tw='flex justify-center'>
-          <a href="https://airtable.com/shrRj5bUAauDj2M4G" target="_blank" rel="noreferrer">
-            <Button isLarge variant="terminal">
-              Apply for June 2023 cohort
-            </Button>
-          </a>
+        <div tw='my-xl'>
+          <div tw='flex justify-center'>
+            <a href="https://airtable.com/shrRj5bUAauDj2M4G" target="_blank" rel="noreferrer">
+              <Button isLarge variant="terminal">
+                Apply for June 2023 cohort
+              </Button>
+            </a>
+          </div>
+          <P tw='text-sm mt-xxs font-medium'>Max 30 seats per cohort</P>
+          <P tw='text-sm mt-xxs font-medium pb-xxl'>Tuition: $1750/year or $3500/lifetime</P>
         </div>
-        <P tw='text-sm mt-xxs font-medium'>Max 30 seats per cohort</P>
-        <P tw='text-sm mt-xxs font-medium pb-xxl'>Tuition: $1750/year or $3500/lifetime</P>
 
         <VideoCard
           videoEmbedSrc={'https://www.youtube.com/embed/_xsJA3ApAPY'}
           // title="Botcamp Trailer"
           descriptionText="BotCamp trailer video"
         />
-
       </Container>
-      <Separator />
+      <GetNewsletter />
     </Section>
-  )
+)
 }
 
 export default BotcampHero

src/ui/components/botcamp/GetNewsletter.js

@@ -0,0 +1,71 @@
+/* eslint no-unused-vars: [ "off", { "argsIgnorePattern": "tw" } ] */
+import React from 'react'
+import tw, { styled, css } from 'twin.macro'
+import { Section, Container } from '@hummingbot/hbui/elements/layout'
+import { H3, H6, PSmall } from '@hummingbot/hbui/elements/typography'
+import MailchimpSubscribe from './MailchimpSubscribe'
+import { Button } from '@hummingbot/hbui/elements/buttons'
+
+function GetNewsletter() {
+  return (
+  <Section tw='mt-xxxl mb-xl'>
+    <H3 tw='text-center'>
+      Not quite ready to apply yet?
+    </H3>
+    <CustomContainer>
+      <LeftColumn>
+        <Item>
+          <br />
+          <H6 isWhite isBold>
+            Get the Botcamp Newsletter
+          </H6>
+          <PSmall isWhite>
+            Get notified about news, events, and content from the Hummingbot Botcamp community    
+          </PSmall>
+          <div tw='flex justify-center'>
+            <MailchimpSubscribe />
+          </div>
+        </Item>
+      </LeftColumn>
+      <RightColumn>
+        <Item>
+          <br />
+          <H6 isWhite isBold>
+            Schedule an Info Call
+          </H6>
+          <PSmall isWhite>
+            Ask us anything about how Botcamp works   
+          </PSmall>
+          <br />
+          <br />
+          <div tw='flex justify-center'>
+            <a href="https://calendly.com/michelle-hummingbot-botcamp/applications" target="_blank" rel="noreferrer">
+              <Button isLarge variant="success">
+                Book a slot
+              </Button>
+            </a>
+          </div>
+        </Item>
+      </RightColumn>
+    </CustomContainer>
+  </Section>
+  )
+}
+
+export default GetNewsletter
+
+const CustomContainer = styled(Container)(() => [
+  tw`my-md flex flex-col md:(flex-row my-xl)`,
+])
+
+const LeftColumn = styled.div(() => [
+  tw`w-full pb-xs md:(w-1/2 pr-xl)`,
+])
+
+const RightColumn = styled.div(() => [
+  tw`w-full md:w-1/2`,
+])
+
+const Item = styled.div(() => [
+  tw`border-t-2 border-success text-center`,
+])

src/ui/components/botcamp/MailchimpSubscribe.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import TextInput from '@hummingbot/hbui/components/input/TextInput'
+import { Button } from '@hummingbot/hbui/elements/buttons'
+import { CustomRoundButton } from '../../elements/buttons'
+import { LabelSmall } from '@hummingbot/hbui/elements/typography'
+import addToMailchimp from 'gatsby-plugin-mailchimp'
+
+const ERR_KEY = 'email-list.'
+
+class MailchimpSubscribe extends Component {
+  state = {
+    email: '',
+    success: '',
+    error: '',
+    braveWarning: '',
+  }
+
+  handleEmailChange = (e) => {
+    console.log(e.target.value)
+    this.setState({
+      email: e.target.value,
+      success: '',
+      error: '',
+    })
+  }
+
+  handleSubmit = async (e) => {
+    e.preventDefault()
+    const { email } = this.state
+    console.log(email)
+    try {
+      const { endpointOverride } = this.props
+      const response = await addToMailchimp(email, {}, endpointOverride)
+      if (response && response.result === 'success') {
+        this.setState({ success: response.msg })
+        // TO-DO: replace with posthog
+        if (typeof window !== 'undefined' && typeof window.heap !== 'undefined') {
+          window.heap.identify(email)
+        }
+      } else {
+        console.log('error in await addToMailchimp')
+        this.setState({ error: response.msg })
+      }
+    } catch (err) {
+      console.error(err)
+      if (err.message === 'Timeout') {
+        this.setState({
+          braveWarning: 'Looks like you are using Brave browser - please click the shield icon and toggle off "Ads and trackers blocked", then re-submit your email.'
+        })
+      }
+    }
+  }
+
+  render() {
+    const { email, success, error, braveWarning } = this.state
+    const shortenedError = error
+      ? error.slice(0, error.indexOf(ERR_KEY) + ERR_KEY.length)
+      : null
+
+    return (
+      <div tw='my-md'>
+        <form onSubmit={this.handleSubmit} tw='flex items-center mb-xs'>
+          <TextInput
+            tw='px-2 py-2 focus:outline-none hover:border-success'
+            type='email'
+            placeholder='Email address...'
+            value={email}
+            onChange={this.handleEmailChange}
+          />
+          <CustomRoundButton
+            tw='px-2 py-2 rounded-md focus:outline-none'
+            variant='success'
+            type='submit'
+            id='mc-embedded-subscribe'
+          >
+            Join now
+          </CustomRoundButton>
+        </form>
+        <div tw='flex justify-center'>
+          {success && <LabelSmall tw="text-success absolute">{success}</LabelSmall>}
+          {shortenedError && <LabelSmall tw="text-danger absolute">{shortenedError}</LabelSmall>}
+          {braveWarning && <LabelSmall id="braveWarning" tw="text-warning absolute">{braveWarning}</LabelSmall>}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default MailchimpSubscribe

yarn.lock

@@ -1576,10 +1576,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@hummingbot/hbui@1.8.27":
-  version "1.8.27"
-  resolved "https://registry.yarnpkg.com/@hummingbot/hbui/-/hbui-1.8.27.tgz#1ce5d73b42226216b1ebbf5279316ebc2fbabfc6"
-  integrity sha512-znV/lkT6/raXYrNjPWMLTVSzDvAzNfrnT40I26D8drqLUXBvF4CGAIUtLShs5x6d+k2qyDyhAbsVptwkecN3yg==
+"@hummingbot/hbui@1.9.6":
+  version "1.9.6"
+  resolved "https://registry.yarnpkg.com/@hummingbot/hbui/-/hbui-1.9.6.tgz#f5b644b4949f068df5f7d05585f65593da3e03a2"
+  integrity sha512-O/w4y1qU+BMDYbmrvkg/pWZUR13QbILv+WLc8Hr2+6nCUbLWgyjyXaLBoZ7M91/dlP6p5oWAfDBSqQQnZGH10g==
   dependencies:
     "@babel/core" "^7.13.8"
     "@headlessui/react" "^1.5.0"
@@ -4853,7 +4853,7 @@ date-fns@^2.25.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
-[email protected], debug@^2.6.0, debug@^2.6.9:
+[email protected], debug@^2.1.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -5210,6 +5210,11 @@ electron-to-chromium@^1.4.147:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.164.tgz#3d0f5c83557d8ec8a7faa531e498f198c3bd974a"
   integrity sha512-K7iy5y6XyP9Pzh3uaDti0KC4JUNT6T1tLG5RTOmesqq2YgAJpYYYJ32m+anvZYjCV35llPTEh87kvEV/uSsiyQ==
 
+email-validator@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
+  integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -6424,6 +6429,14 @@ gatsby-plugin-image@^2.17.0:
     objectFitPolyfill "^2.3.5"
     prop-types "^15.8.1"
 
+gatsby-plugin-mailchimp@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-mailchimp/-/gatsby-plugin-mailchimp-5.2.2.tgz#bed94cb70b9d91267329a5e6a0220e821d8ff6e8"
+  integrity sha512-O9JizVPJAe5YT1QAHZNRh1xUVdPnfayfIRhsBULiK2629TQRvEzzQxTDbt/WZU02cVm8415Fx2CneaxYKLt0ag==
+  dependencies:
+    email-validator "^2.0.4"
+    jsonp "^0.2.1"
+
 gatsby-plugin-manifest@^4.17.0:
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-4.17.0.tgz#ac3d8be81629953f8af8e0570fdfc2fad02401db"
@@ -8047,6 +8060,13 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  integrity sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==
+  dependencies:
+    debug "^2.1.3"
+
 jsontoxml@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/jsontoxml/-/jsontoxml-1.0.1.tgz#07fff7f6bfbfa1097d779aec7f041b5046075e70"