{"version":3,"file":"component---src-pages-slack-signup-index-js-fbcf5203ab3989bffe34.js","mappings":"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","sources":["webpack://hpe-dev-portal/./src/pages/slack-signup/index.js"],"sourcesContent":["import React, { useState,useContext } from 'react';\n// import '../../css/style.css';\nimport Swal from 'sweetalert2';\nimport { Box, Image, Button, TextInput, Text } from 'grommet';\nimport PropTypes from 'prop-types';\nimport { graphql } from 'gatsby';\nimport { Layout, SEO } from '../../components';\nimport { AppContext } from '../../providers/AppProvider';\n\nconst image = '/images/hero-pic.png';\nconst buttonstyle = {\n  backgroundColor: '#dcdcdc',\n  borderRadius: '100px',\n  align: 'center',\n  height: '50px',\n  fontSize: '15px',\n  fontFamily: 'sans-serif',\n};\nexport default function Slacksignup() {\n  const { user: userDetails } = useContext(AppContext);\n  const [email, setemail] = useState(userDetails?.email || '');\n  const onsubmit = (evt) => {\n    evt.preventDefault();\n    if (email) {\n      const doInvite = () => {\n        const formData = new FormData();\n        formData.append('email', email);\n        formData.append('token', process.env.GATSBY_SLACK_TOKEN);\n        formData.append('set_active', true);\n        return fetch(process.env.GATSBY_SLACK_INVITE_URL, {\n          method: 'POST',\n          body: formData,\n          json: true,\n        })\n          .then((res) => res.json())\n          .then((res) => {\n            if (res.ok) {\n              const el = document.createElement('div');\n              el.innerHTML = `Please check <b> ${email}</b> \n                              for an invite from slack`;\n              Swal.fire({\n                title: 'SUCCESS !',\n                html: el,\n                icon: 'success',\n              });\n            } else {\n              let { error } = res;\n              if (error === 'already_invited' || error === 'already_in_team') {\n                const el = document.createElement('div');\n                el.innerHTML =\n                  \"It seems like you are already member of our slack.<br>Visit <a href=https://hpedev.slack.com target='_blank' > <b> HPE Developer Community</b></a> on slack\";\n                Swal.fire({\n                  title: 'Success',\n                  html: el,\n                  icon: 'success',\n                });\n              } else if (error === 'already_in_team_invited_user') {\n                const l = document.createElement('div');\n                l.innerHTML = `Please check again <b style=\"font-size:large;\" > ${email} </b> for an invite from Slack.<br>Visit <a href=https://developer.hpe.com/ target=\"_blank\"> HPE Developer Community</a>`;\n                Swal.fire({\n                  title: 'It seems like we already sent you our slack invite',\n                  html: l,\n                  icon: 'info',\n                });\n              } else {\n                if (error === 'invalid_email') {\n                  error = 'The email you entered is an invalid email.';\n                } else if (error === 'invalid_auth') {\n                  error =\n                    'Something has gone wrong. Please' +\n                    ' contact a system administrator.';\n                }\n                Swal.fire({\n                  title: 'Error',\n                  html: error,\n                  icon: 'error',\n                });\n              }\n            }\n          })\n          .catch((err) => {\n            Swal.fire({\n              title: 'Error !',\n              html: err,\n              icon: 'error',\n            });\n          });\n      }; // end of doInvite\n      doInvite();\n    } // end of if statement\n    else {\n      const errMsg = [];\n      if (!email) {\n        errMsg.push('your email is required');\n      }\n      Swal.fire({\n        html: `Failed! ${errMsg.join(' and ')}.`,\n        icon: 'info',\n      });\n    }\n    setTimeout(() => {\n      setemail('');\n    }, 2500);\n  };\n  const handlechange = (event) => {\n    setemail(event.target.value);\n  };\n  return (\n    <Layout>\n      <SEO title=\"Slack-signup\" />\n      <Box direction=\"row-responsive\" pad=\"xlarge\" gap=\"xlarge\" align=\"center\">\n        <Box>\n          <Box style={{ marginTop: '-30px' }}>\n            <Text size=\"xlarge\" style={{ margingTop: '-10px', color: 'grey' }}>\n              Sign up for\n            </Text>\n            <h1\n              style={{\n                fontFamily: 'sans-serif',\n                color: '#220',\n                fontWeight: 550,\n                letterSpacing: '0.5px',\n                fontSize: '63px',\n                lineHeight: '5rem',\n              }}\n            >\n              HPE Developer Community <br /> Slack\n            </h1>\n            <Image\n              style={{\n                height: '80px',\n                width: '100px',\n                float: 'right',\n                marginTop: '-120px',\n                marginLeft: '170px',\n              }}\n              src=\"/img/community/slack.svg\"\n              alt=\"slack logo\"\n            />\n            <p style={{ fontWeight: 400, fontSize: '22px' }}>\n              Where you’ll find all things software at HPE. Join us to\n              collaborate and build applications and integrations with HPE\n              products using the latest software and open source technologies\n            </p>\n          </Box>\n          <Text size=\"large\">Email</Text>\n          <form className=\"form\" id=\"join-form\" onSubmit={onsubmit}>\n            <Box align=\"center\" border={{ side: 'bottom', size: 'small' }}>\n              <TextInput\n                type=\"email\"\n                placeholder=\"example@my.com\"\n                value={email}\n                name=\"email\"\n                onChange={handlechange}\n                style={{ position: 'relative', marginLeft: '-10px' }}\n                required\n                plain\n              />\n            </Box>\n            <br />\n            <Button\n              label=\"Join us on Slack\"\n              primary\n              reverse\n              type=\"submit\"\n              onSubmit={onsubmit}\n              icon={\n                <Image\n                  src=\"/img/home/hpe-element.png\"\n                  style={{ width: '50px' }}\n                />\n              }\n              style={{\n                backgroundColor: '#01A982',\n                borderRadius: '100px',\n                color: '#ffffff',\n                width: '250px',\n                position: 'relative',\n                height: '40px',\n              }}\n            />\n          </form>\n        </Box>\n        <Box align=\"center\">\n          <Image src={image} alt=\"hpedev logo\" />\n        </Box>\n      </Box>\n      <Box\n        direction=\"row-responsive\"\n        pad=\"xlarge\"\n        gap=\"medium\"\n        align=\"center\"\n        style={{ marginTop: '-120px' }}\n      >\n        <Button label=\"50+ Channels\" style={buttonstyle} />\n        <Button label=\"Over 4,000 members\" style={buttonstyle} />\n        <Button label=\"6 Years+ Community\" style={buttonstyle} />\n      </Box>\n    </Layout>\n  );\n}\n\nSlacksignup.propTypes = {\n  data: PropTypes.shape({\n    site: PropTypes.shape({\n      siteMetadata: PropTypes.shape({\n        title: PropTypes.string.isRequired,\n      }).isRequired,\n    }).isRequired,\n    markdownRemark: PropTypes.shape({\n      frontmatter: PropTypes.shape({\n        title: PropTypes.string.isRequired,\n        image: PropTypes.string,\n      }).isRequired,\n      rawMarkdownBody: PropTypes.string,\n    }).isRequired,\n  }),\n};\nexport const slack = graphql`\n  query {\n    site {\n      siteMetadata {\n        title\n      }\n    }\n    markdownRemark(fields: { slug: { eq: \"/\" } }) {\n      excerpt\n      frontmatter {\n        title\n        image\n      }\n      rawMarkdownBody\n    }\n  }\n`;\n"],"names":["image","buttonstyle","backgroundColor","borderRadius","align","height","fontSize","fontFamily","Slacksignup","user","userDetails","useContext","AppContext","email","setemail","useState","onsubmit","evt","preventDefault","doInvite","formData","FormData","append","process","fetch","method","body","json","then","res","ok","el","document","createElement","innerHTML","Swal","title","html","icon","error","l","catch","err","errMsg","push","join","setTimeout","React","Layout","SEO","Box","direction","pad","gap","style","marginTop","Text","size","margingTop","color","fontWeight","letterSpacing","lineHeight","Image","width","float","marginLeft","src","alt","className","id","onSubmit","border","side","TextInput","type","placeholder","value","name","onChange","event","target","position","required","plain","Button","label","primary","reverse"],"sourceRoot":""}