feat(Thanks): update success page

GaiAma · Dec 16, 2019 · a8f616a · a8f616a
1 parent c3c34f5
commit a8f616a
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "react-headroom": "3.0.0",
     "react-helmet": "5.2.1",
     "react-media": "1.10.0",
+    "react-share": "^3.0.1",
     "react-spring": "^8.0.27",
     "react-textarea-autosize": "7.1.2",
     "react-toastify": "5.4.1",

diff --git a/src/templates/PaypalSuccessPage.js b/src/templates/PaypalSuccessPage.js
@@ -1,39 +1,137 @@
-import React from 'react'
+/** @jsx jsx */
+import { jsx, Box, Flex } from 'theme-ui'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
-import { css } from '@emotion/core'
-import Img from 'gatsby-image/withIEPolyfill'
 import Helmet from 'react-helmet'
+import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer'
+import { MDXProvider } from '@mdx-js/react'
 import MainLayout from '@components/MainLayout'
-import TitledCopy from '@components/TitledCopy'
-// import Newsticker from '@components/Newsticker'
+import {
+  FacebookIcon,
+  FacebookShareButton,
+  TwitterIcon,
+  TwitterShareButton,
+  TelegramIcon,
+  TelegramShareButton,
+  WhatsappIcon,
+  WhatsappShareButton,
+  LinkedinShareButton,
+  LinkedinIcon,
+  PinterestShareButton,
+  PinterestIcon,
+  VKShareButton,
+  VKIcon,
+  RedditShareButton,
+  RedditIcon,
+  TumblrShareButton,
+  TumblrIcon,
+  MailruShareButton,
+  MailruIcon,
+  ViberShareButton,
+  ViberIcon,
+  PocketShareButton,
+  PocketIcon,
+  InstapaperIcon,
+  InstapaperShareButton,
+  EmailShareButton,
+  EmailIcon,
+} from 'react-share'
+
+const components = {}
 
 const PaypalSuccessPage = props => {
-  const { page } = props.data
+  const { page, Accounts, site, SiteMeta } = props.data
+  const url = site.siteMetadata.siteUrl
+  const { shareText } = page.frontmatter
+  const { accounts } = Accounts.frontmatter
+  const cover =
+    site.siteMetadata.siteUrl +
+    SiteMeta.frontmatter.assets.globalCover.publicURL
+  const tags = [`GoodCause`, `DoGood`, `Rainforest`]
+
+  const getAccount = name => {
+    const account = accounts.find(x => x.service === name)
+    return account?.handle || ``
+  }
+
   return (
     <MainLayout {...props}>
       <Helmet>
         <meta name="robots" content="noindex" />
       </Helmet>
 
-      <TitledCopy
-        centered
-        title={page.frontmatter.intro.title}
-        paragraphs={page.frontmatter.intro.text}
-        css={css`
-          margin-bottom: 2rem;
-        `}
-      />
-
-      <div
-        css={css`
-          display: flex;
-          justify-content: center;
-          margin-bottom: 2rem;
-        `}
+      <Box
+        sx={{
+          mx: `auto`,
+          maxWidth: `50rem`,
+          '.inline-gallery': {
+            maxWidth: `20rem`,
+            mx: `auto`,
+            '*': { borderRadius: `round` },
+          },
+        }}
       >
-        <Img fixed={page.frontmatter.assets.gratitude.image.fixed} />
-      </div>
+        <MDXProvider components={components}>
+          <MDXRenderer>{page.body}</MDXRenderer>
+        </MDXProvider>
+
+        <Flex
+          sx={{
+            my: `2rem`,
+            mx: `auto`,
+            maxWidth: `32.5rem`,
+            '> div': { mx: `0.2rem` },
+          }}
+        >
+          <FacebookShareButton url={url} quote={shareText} hashtag="#GoodCause">
+            <FacebookIcon round size={32} />
+          </FacebookShareButton>
+          <TwitterShareButton
+            url={url}
+            title={shareText}
+            via={getAccount(`twitter`)}
+            hashtags={tags}
+          >
+            <TwitterIcon round size={32} />
+          </TwitterShareButton>
+          <WhatsappShareButton url={url} title={shareText}>
+            <WhatsappIcon round size={32} />
+          </WhatsappShareButton>
+          <TelegramShareButton url={url} title={shareText}>
+            <TelegramIcon round size={32} />
+          </TelegramShareButton>
+          <PinterestShareButton url={url} media={cover}>
+            <PinterestIcon round size={32} />
+          </PinterestShareButton>
+          <LinkedinShareButton url={url}>
+            <LinkedinIcon round size={32} />
+          </LinkedinShareButton>
+          <RedditShareButton url={url} title={shareText}>
+            <RedditIcon round size={32} />
+          </RedditShareButton>
+          <TumblrShareButton url={url} title={shareText} tags={tags}>
+            <TumblrIcon round size={32} />
+          </TumblrShareButton>
+          <ViberShareButton url={url} title={shareText}>
+            <ViberIcon round size={32} />
+          </ViberShareButton>
+          <VKShareButton url={url} title={shareText} image={cover}>
+            <VKIcon round size={32} />
+          </VKShareButton>
+          <MailruShareButton url={url} title={shareText} image={cover}>
+            <MailruIcon round size={32} />
+          </MailruShareButton>
+          <PocketShareButton url={url} title={shareText}>
+            <PocketIcon round size={32} />
+          </PocketShareButton>
+          <InstapaperShareButton url={url} title={shareText}>
+            <InstapaperIcon round size={32} />
+          </InstapaperShareButton>
+          <EmailShareButton url={url} body={shareText}>
+            <EmailIcon round size={32} />
+          </EmailShareButton>
+        </Flex>
+      </Box>
 
       {/* <Newsticker
         items={props.data.news.edges.map(x => x.node)}
@@ -69,6 +167,7 @@ export const query = graphql`
 
     page: mdx(frontmatter: { slug: { eq: $slug } }) {
       ...MdxTranslations
+      body
       fields {
         url
       }
@@ -77,19 +176,7 @@ export const query = graphql`
         lang
         slug
         summary
-        intro {
-          title
-          text
-        }
-        assets {
-          gratitude {
-            image: childImageSharp {
-              fixed(quality: 75) {
-                ...GatsbyImageSharpFixed
-              }
-            }
-          }
-        }
+        shareText
       }
     }
   }

diff --git a/yarn.lock b/yarn.lock
@@ -4309,7 +4309,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -5666,7 +5666,7 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-debug@2, [email protected], debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+debug@2, [email protected], debug@^2.1.2, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8, 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==
@@ -11097,6 +11097,13 @@ jsonify@~0.0.0:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
   integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
+jsonp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/jsonp/-/jsonp-0.2.1.tgz#a65b4fa0f10bda719a05441ea7b94c55f3e15bae"
+  integrity sha1-pltPoPEL2nGaBUQep7lMVfPhW64=
+  dependencies:
+    debug "^2.1.3"
+
 jsonparse@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
@@ -14640,6 +14647,16 @@ react-reconciler@^0.24.0:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
+react-share@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-share/-/react-share-3.0.1.tgz#be9dc3f80059c4fed33542472f4e7425bb3a76cb"
+  integrity sha512-xo4zjYP78h6zrBN5rlC06bb877js7216KFeZELAZP6sYxVoqmU27ChrfnpKUCL9H8F5PwYXh6DLNdAp+0E17GA==
+  dependencies:
+    babel-runtime "^6.26.0"
+    classnames "^2.2.5"
+    jsonp "^0.2.1"
+    prop-types "^15.5.8"
+
 react-side-effect@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"