feat: buy now functionality using stripe

learnwithparam · May 17, 2020 · 2e80ec5 · 2e80ec5
1 parent 491813a
commit 2e80ec5
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 61 deletions.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -1,11 +1,12 @@
 import React from "react";
-import { Link } from "gatsby";
 import { Box, Flex, Text } from "@chakra-ui/core";
 import styled from "@emotion/styled";
 
-const StyledLink = styled(Link)`
+import { StyledLink } from "./shared";
+
+const FooterLink = styled(StyledLink)`
   text-decoration: none;
-  margin-left: 10px;
+  margin-left: 16px;
 `;
 
 const Footer = () => {
@@ -14,15 +15,15 @@ const Footer = () => {
       <Flex width="100%" maxW="720px" m="0 auto" alignItems="center">
         <Box>
           <Text as="span">© {new Date().getFullYear()} </Text>
-          <Text as="span" color="yellow.400">
+          <Text as="span" color="red.400">
             learnwithparam.com
           </Text>
         </Box>
         <Box as="nav" ml="auto">
-          <StyledLink to="/support/terms-and-conditions">
+          <FooterLink to="/support/terms-and-conditions">
             Terms and Conditions
-          </StyledLink>
-          <StyledLink to="/support/privacy-policy">Privacy policy</StyledLink>
+          </FooterLink>
+          <FooterLink to="/support/privacy-policy">Privacy policy</FooterLink>
         </Box>
       </Flex>
     </Box>

diff --git a/src/components/shared.js b/src/components/shared.js
@@ -1,5 +1,7 @@
+import React from "react";
 import { Link } from "gatsby";
 import styled from "@emotion/styled";
+import { Flex, Box } from "@chakra-ui/core";
 
 export const StyledLink = styled(Link)`
   color: ${props => `${props.theme.colors.yellow[400]}`};
@@ -8,3 +10,29 @@ export const StyledLink = styled(Link)`
     color: ${props => `${props.theme.colors.yellow[600]}`};
   }
 `;
+
+export const StyledAnchor = styled.a`
+  color: ${props => `${props.theme.colors.yellow[400]}`};
+  text-decoration: underline;
+  &:hover {
+    color: ${props => `${props.theme.colors.yellow[600]}`};
+  }
+`;
+
+export const HeroContainer = ({ children, ...props }) => {
+  return (
+    <Flex
+      as="section"
+      maxW="720px"
+      minH="calc(100vh - 190px)"
+      mx="auto"
+      my="3"
+      p="3"
+      alignItems="center"
+    >
+      <Box {...props} maxW="600px" my="60px" mx="auto">
+        {children}
+      </Box>
+    </Flex>
+  );
+};
diff --git a/src/pages/about.js b/src/pages/about.js
@@ -1,8 +1,10 @@
 import React from "react";
 import { useStaticQuery, graphql } from "gatsby";
+import { Heading, Text } from "@chakra-ui/core";
 
 import Layout from "../components/layout";
 import SEO from "../components/seo";
+import { StyledAnchor, HeroContainer } from "../components/shared";
 
 const AboutPage = () => {
   const data = useStaticQuery(graphql`
@@ -21,20 +23,35 @@ const AboutPage = () => {
   return (
     <Layout>
       <SEO title="About" />
-      <h1>About</h1>
-      <p>
-        We are Eco Shop selling the merchandise for{" "}
-        <a rel="noopener noreferrer" href={siteUrl} target="_blank">
-          Learn with Param
-        </a>
-      </p>
-      <p>
-        You can reach me out in{" "}
-        <a rel="noopener noreferrer" href={twitterUrl} target="_blank">
-          twitter
-        </a>
-      </p>
-      <p>Site created by {author}</p>
+      <HeroContainer>
+        <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
+          About
+        </Heading>
+        <Text>
+          We are Eco Shop selling the merchandise for{" "}
+          <StyledAnchor
+            rel="noopener noreferrer"
+            href={siteUrl}
+            target="_blank"
+          >
+            Learn with Param
+          </StyledAnchor>
+        </Text>
+        <Text>
+          You can reach me out in{" "}
+          <StyledAnchor
+            rel="noopener noreferrer"
+            href={twitterUrl}
+            target="_blank"
+          >
+            twitter
+          </StyledAnchor>
+        </Text>
+        <Text>
+          Site created by
+          {author}
+        </Text>
+      </HeroContainer>
     </Layout>
   );
 };

diff --git a/src/pages/cancel.js b/src/pages/cancel.js
@@ -1,29 +1,19 @@
 import React from "react";
-import { Flex, Box, Heading } from "@chakra-ui/core";
+import { Heading } from "@chakra-ui/core";
 
 import Layout from "../components/layout";
 import SEO from "../components/seo";
-import { StyledLink } from "../components/shared";
+import { StyledLink, HeroContainer } from "../components/shared";
 
 const CancelPage = () => (
   <Layout>
     <SEO title="Order Cancelled" />
-    <Flex
-      as="section"
-      maxW="720px"
-      minH="calc(100vh - 190px)"
-      mx="auto"
-      my="3"
-      p="3"
-      alignItems="center"
-    >
-      <Box textAlign="center" maxW="600px" my="60px" mx="auto">
-        <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
-          You can check out our other products
-        </Heading>
-        <StyledLink to="/">Explore products</StyledLink>
-      </Box>
-    </Flex>
+    <HeroContainer textAlign="center">
+      <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
+        You can check out our other products
+      </Heading>
+      <StyledLink to="/">Explore products</StyledLink>
+    </HeroContainer>
   </Layout>
 );
 

diff --git a/src/pages/success.js b/src/pages/success.js
@@ -1,29 +1,19 @@
 import React from "react";
-import { Flex, Box, Heading } from "@chakra-ui/core";
+import { Heading } from "@chakra-ui/core";
 
 import Layout from "../components/layout";
 import SEO from "../components/seo";
-import { StyledLink } from "../components/shared";
+import { StyledLink, HeroContainer } from "../components/shared";
 
 const SuccessPage = () => (
   <Layout>
     <SEO title="Order Successful" />
-    <Flex
-      as="section"
-      maxW="720px"
-      minH="calc(100vh - 190px)"
-      mx="auto"
-      my="3"
-      p="3"
-      alignItems="center"
-    >
-      <Box textAlign="center" maxW="600px" my="60px" mx="auto">
-        <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
-          Order has been placed Successfully
-        </Heading>
-        <StyledLink to="/">Explore products</StyledLink>
-      </Box>
-    </Flex>
+    <HeroContainer textAlign="center">
+      <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
+        Order has been placed Successfully
+      </Heading>
+      <StyledLink to="/">Explore products</StyledLink>
+    </HeroContainer>
   </Layout>
 );
 

diff --git a/src/pages/support/privacy-policy.js b/src/pages/support/privacy-policy.js
@@ -1,13 +1,19 @@
 import React from "react";
+import { Heading, Text } from "@chakra-ui/core";
 
 import Layout from "../../components/layout";
 import SEO from "../../components/seo";
+import { HeroContainer } from "../../components/shared";
 
 const PrivacyPage = () => (
   <Layout>
     <SEO title="Privacy Policy" />
-    <h1>Privacy policy</h1>
-    <p>Privacy is a Myth!</p>
+    <HeroContainer>
+      <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
+        Privacy policy
+      </Heading>
+      <Text>Privacy is a Myth!</Text>
+    </HeroContainer>
   </Layout>
 );
 

diff --git a/src/pages/support/terms-and-conditions.js b/src/pages/support/terms-and-conditions.js
@@ -1,13 +1,19 @@
 import React from "react";
+import { Heading, Text } from "@chakra-ui/core";
 
 import Layout from "../../components/layout";
 import SEO from "../../components/seo";
+import { HeroContainer } from "../../components/shared";
 
 const TermsPage = () => (
   <Layout>
     <SEO title="Terms & Conditions" />
-    <h1>Terms & Conditions</h1>
-    <p>IT jobs are subjected to market risk!</p>
+    <HeroContainer>
+      <Heading as="h2" fontSize="2xl" textTransform="uppercase" mb="3">
+        Terms & Conditions
+      </Heading>
+      <Text>IT jobs are subjected to market risk!</Text>
+    </HeroContainer>
   </Layout>
 );