Merge pull request #58 from Dann1y/origin/pricing-page

Pricing Publish

web/common/toolkit.tsx

@@ -5,14 +5,28 @@ import {
   LayoutDetect,
   Products,
   Collaborate,
-  Slogan
-} from 'sections/bridged';
+  Slogan,
+} from "sections/bridged";
+
+import { FreePlan, PlanList, FeatureList, Faq } from "sections/pricing";
 
 export const BridgedSection = [
   { content: () => <Hero key="Hero-section" /> },
-  { content: (isMobile) => <OnlineApp key="OnlineApp-section" isMobile={isMobile} /> },
+  {
+    content: isMobile => (
+      <OnlineApp key="OnlineApp-section" isMobile={isMobile} />
+    ),
+  },
   { content: () => <LayoutDetect key="LayoutDetect-section" /> },
   { content: () => <Products key="Products-section" /> },
   { content: () => <Collaborate key="Collaborate-section" /> },
   { content: () => <Slogan key="Slogan-section" /> },
-];
+];
+
+export const PricingSection = [
+  { content: () => <FreePlan key="FreePlan-section" /> },
+  { content: () => <PlanList key="PlanList-section" /> },
+  { content: () => <FeatureList key="FeatureList-section" /> },
+  { content: () => <Faq key="Faq-section" /> },
+  { content: () => <Slogan key="Slogan-section" /> },
+];

web/components/feature-choice/index.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { Flex, Text } from "rebass";
+import styled from "@emotion/styled";
+import Icon from "components/icon";
+
+interface FeatureChoiceProps {
+  titleList: string;
+  featureData: any;
+}
+
+const FeatureChoice: React.FC<FeatureChoiceProps> = props => {
+  const { titleList, featureData } = props;
+  const [isOpen, setIsOpen] = useState([]);
+
+  const handleFeatureClick = (idx: number) => {
+    setIsOpen(d => {
+      if (d.indexOf(idx) != -1) {
+        d.splice(d.indexOf(idx), 1);
+        return [...d.filter((item, index) => d.indexOf(item) === index)];
+      } else {
+        return [...d.filter((item, index) => d.indexOf(item) === index), idx];
+      }
+    });
+  };
+
+  return (
+    <Flex width="100%" backgroundColor="#ccc" alignItems="center" mb="58px">
+      <Flex flexDirection="column">
+        <Text mt="17px" mb="33px" fontSize="18px" color="#7e7e7e">
+          {titleList}{" "}
+          {titleList === "Extra Usage" && (
+            <Icon isVerticalMiddle name="questionMark" />
+          )}
+        </Text>
+        {featureData.map((item, ix) => (
+          <Item
+            flexDirection="column"
+            onClick={() => handleFeatureClick(ix)}
+            style={{ cursor: "pointer" }}
+            mb="36px"
+            key={item.id}
+          >
+            <Text fontWeight="bold" fontSize="16px" color="#000000">
+              {item.title}
+            </Text>
+            <Text color="#2b2b2b" fontWeight="normal">
+              {item.feature.map((i, idx) => (
+                <Feature width="100%" key={i.id}>
+                  {isOpen.includes(ix) && (
+                    <Flex mb="12px" width="62%">
+                      {i.name}
+                    </Flex>
+                  )}
+                </Feature>
+              ))}
+            </Text>
+          </Item>
+        ))}
+
+        <Text fontSize="16px" fontWeight="bold" style={{ cursor: "pointer" }}>
+          View all <Icon name="arrowDown" isVerticalMiddle />
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
+
+const Item = styled(Flex)`
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+const Feature = styled(Flex)`
+  &:first-of-type {
+    margin-top: 24px;
+  }
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+export default FeatureChoice;