chore(home): implements home screens [WIP]

fixes #53
wp-pwa · Dec 11, 2018 · 1cc16f0 · 1cc16f0
1 parent b9c5533
commit 1cc16f0
Show file tree

Hide file tree

Showing 16 changed files with 619 additions and 149 deletions.
diff --git a/admin/assets/frontity-theme.png b/admin/assets/frontity-theme.png
diff --git a/admin/components/Header/Links.js b/admin/components/Header/Links.js
@@ -4,7 +4,7 @@ import { Box, Button } from "grommet";
 const Links = () => (
   <Box direction="row" align="center" justify="between">
     <Button
-      label="Contant and help"
+      label="Contact and help"
       focusIndicator={false}
       margin={{ right: "20px" }}
     />

diff --git a/admin/components/Home/RequestForm.js b/admin/components/Home/RequestForm.js
@@ -0,0 +1,174 @@
+import React from "react";
+import { string, func } from "prop-types";
+import { inject } from "mobx-react";
+import styled from "styled-components";
+import {
+  Box,
+  Heading,
+  Paragraph,
+  FormField,
+  TextInput,
+  RadioButton
+} from "grommet";
+
+const RequestForm = ({
+  requestFormName,
+  requestFormEmail,
+  requestFormUrl,
+  requestFormType,
+  requestFormTraffic,
+  setRequestFormName,
+  setRequestFormEmail,
+  setRequestFormUrl,
+  setRequestFormType,
+  setRequestFormTraffic
+}) => (
+  <Container margin={{ bottom: "16px" }}>
+    <Header margin={{ vertical: "0", horizontal: "0" }}>
+      Get started by requesting a Site ID
+    </Header>
+    <Body>
+      <Comment margin={{ top: "0", bottom: "20px" }}>
+        Access to our platform is currently limited. In order to configure and
+        activate our Progressive Web App (PWA) theme you have to request a site
+        ID first. This will allow you to connect your WordPress site with our
+        platform.
+      </Comment>
+      <FormField label="Name">
+        <TextInput
+          placeholder="John Doe"
+          value={requestFormName}
+          onChange={setRequestFormName}
+        />
+      </FormField>
+      <FormField label="Email">
+        <TextInput
+          placeholder="johndoe@example.com"
+          value={requestFormEmail}
+          onChange={setRequestFormEmail}
+        />
+      </FormField>
+      <FormField label="WordPress URL">
+        <TextInput
+          placeholder="yourblog.com"
+          value={requestFormUrl}
+          onChange={setRequestFormUrl}
+        />
+      </FormField>
+      <Box margin={{ top: "24px" }} direction="row" justify="between">
+        <RadioBox>
+          <RadioHead>Type of your WordPress site</RadioHead>
+          {[
+            "Blog / News Site",
+            "eCommerce / Online store",
+            "Corporate site / Online bussiness",
+            "Classifieds site",
+            "Other"
+          ].map(value => (
+            <RadioButton
+              key={value}
+              label={value}
+              name={value}
+              checked={requestFormType === value}
+              onChange={setRequestFormType}
+            />
+          ))}
+        </RadioBox>
+        <RadioBox>
+          <RadioHead>Monthly traffic: (Pageviews per month)</RadioHead>
+          {[
+            "More than 1 million",
+            "500.000 - 1 million",
+            "100.000 - 500.000",
+            "Less than 100.000",
+            "I don't know"
+          ].map(value => (
+            <RadioButton
+              key={value}
+              label={value}
+              name={value}
+              checked={requestFormTraffic === value}
+              onChange={setRequestFormTraffic}
+            />
+          ))}
+        </RadioBox>
+      </Box>
+    </Body>
+  </Container>
+);
+
+RequestForm.propTypes = {
+  requestFormName: string.isRequired,
+  requestFormEmail: string.isRequired,
+  requestFormUrl: string.isRequired,
+  requestFormType: string.isRequired,
+  requestFormTraffic: string.isRequired,
+  setRequestFormName: func.isRequired,
+  setRequestFormEmail: func.isRequired,
+  setRequestFormUrl: func.isRequired,
+  setRequestFormType: func.isRequired,
+  setRequestFormTraffic: func.isRequired
+};
+
+export default inject(({ stores: { ui } }) => ({
+  requestFormName: ui.requestFormName,
+  requestFormEmail: ui.requestFormEmail,
+  requestFormUrl: ui.requestFormUrl,
+  requestFormType: ui.requestFormType,
+  requestFormTraffic: ui.requestFormTraffic,
+  setRequestFormName: ui.setRequestFormName,
+  setRequestFormEmail: ui.setRequestFormEmail,
+  setRequestFormUrl: ui.setRequestFormUrl,
+  setRequestFormType: ui.setRequestFormType,
+  setRequestFormTraffic: ui.setRequestFormTraffic
+}))(RequestForm);
+
+const StyledBox = styled(Box)`
+  border-radius: 4px;
+  background-color: #fff;
+`;
+
+const Container = styled(StyledBox)`
+  box-shadow: 0 1px 4px 0 rgba(31, 56, 197, 0.12),
+    0 8px 12px 0 rgba(31, 56, 197, 0.12);
+`;
+
+const StyledParagraph = styled(Paragraph)`
+  max-width: 100%;
+`;
+
+const Comment = styled(StyledParagraph)`
+  color: #0c112b;
+  opacity: 0.4;
+`;
+
+const Body = styled(Box)`
+  padding: 20px 32px 32px 32px;
+`;
+
+const Header = styled(Heading)`
+  display: block;
+  line-height: 100px;
+  background-color: #f6f9fa;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding: 0 32px;
+  font-size: 24px;
+  font-weight: 600;
+
+  & > span {
+    margin-right: 5px;
+  }
+`;
+
+const RadioBox = styled(Box)`
+  label[class^="StyledRadioButton"] {
+    margin-bottom: 8px;
+  }
+`;
+
+const RadioHead = styled(Paragraph)`
+  width: 200px;
+  margin-top: 0;
+  margin-bottom: 12px;
+`;
diff --git a/admin/components/Home/WithSiteId.js b/admin/components/Home/WithSiteId.js
@@ -0,0 +1,96 @@
+import React from "react";
+import { bool, func } from "prop-types";
+import { inject } from "mobx-react";
+import styled from "styled-components";
+import { Box, Heading, Paragraph, CheckBox } from "grommet";
+
+const WithSiteId = ({ pwaActive, ampActive, setPwaActive, setAmpActive }) => (
+  <>
+    <Notification margin={{ top: "40px", bottom: "20px" }}>
+      You’re all set! Now check your PWA configuration.
+    </Notification>
+    <Container margin={{ bottom: "20px" }}>
+      <Box direction="row" justify="between">
+        <StyledHeading margin={{ vertical: "0", horizontal: "0" }}>
+          Progressive Web App Theme
+        </StyledHeading>
+        <CheckBox toggle checked={pwaActive} onChange={setPwaActive} />
+      </Box>
+      <Comment>
+        Activate this option to replace your current mobile version with our
+        Progressive Web App theme.
+      </Comment>
+    </Container>
+    <Container margin={{ bottom: "40px" }}>
+      <Box direction="row" justify="between">
+        <StyledHeading margin={{ vertical: "0", horizontal: "0" }}>
+          Google AMP
+        </StyledHeading>
+        <CheckBox toggle checked={ampActive} onChange={setAmpActive} />
+      </Box>
+      <Comment>
+        Activate Google AMP on your mobile site with the same look and feel of
+        the PWA theme.
+      </Comment>
+    </Container>
+    <Separator />
+    <Notification>
+      If you like Frontity and appreciate our work, please leave a positive
+      review to support continued development.
+    </Notification>
+  </>
+);
+
+WithSiteId.propTypes = {
+  pwaActive: bool.isRequired,
+  ampActive: bool.isRequired,
+  setPwaActive: func.isRequired,
+  setAmpActive: func.isRequired
+};
+
+export default inject(({ stores: { settings } }) => ({
+  pwaActive: settings.pwa_active,
+  ampActive: settings.amp_active,
+  setPwaActive: settings.setPwaActive,
+  setAmpActive: settings.setAmpActive
+}))(WithSiteId);
+
+const StyledBox = styled(Box)`
+  border-radius: 4px;
+  background-color: #fff;
+`;
+
+const Container = styled(StyledBox)`
+  box-shadow: 0 1px 4px 0 rgba(31, 56, 197, 0.12),
+    0 8px 12px 0 rgba(31, 56, 197, 0.12);
+  padding: 32px 32px 24px 32px;
+`;
+
+const Notification = styled(StyledBox)`
+  padding: 8px;
+  box-shadow: 0 1px 4px 0 rgba(31, 56, 197, 0.12);
+`;
+
+const StyledParagraph = styled(Paragraph)`
+  max-width: 100%;
+`;
+
+const StyledHeading = styled(Heading)`
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.33;
+  color: #24282e;
+`;
+
+const Comment = styled(StyledParagraph)`
+  color: #0c112b;
+  opacity: 0.4;´
+`;
+
+const Separator = styled.div`
+  width: 608px;
+  height: 2px;
+  opacity: 0.08;
+  background-color: #1f38c5;
+  margin-bottom: 40px;
+`;