[#3929] Create Pricing component

landing/src/components/pricing/data.js

@@ -0,0 +1,76 @@
+export const planData = [
+  {
+    id: "flow-basic",
+    name: "Flow Basic",
+    price: "£0/m",
+    note: "*Only for new clients",
+    features: [
+      { name: "Languages", value: "EN/FR/ES" },
+      { name: "Configuration", value: "Self service" },
+      { name: "Survey editor", value: "yes" },
+      { name: "Data point submissions", value: "300 Max." },
+      { name: "Data export formats", value: 1 },
+      {
+        name: "Data monitoring (multiple forms within a survey)",
+        value: "no",
+      },
+      { name: "User management", value: "1 user" },
+      { name: "Link to mobile data collection App (*Android)", value: "yes" },
+      { name: "Webforms", value: "no" },
+      { name: "PowerBI integration*", value: "no" },
+      { name: "Help desk and support (in English)", value: "no" },
+    ],
+  },
+
+  {
+    id: "flow-pro",
+    name: "Flow Pro",
+    price: "£350/m",
+    note: "*Only for new clients",
+    features: [
+      { name: "Languages", value: "EN/FR/ES" },
+      { name: "Configuration", value: "Self service" },
+      { name: "Survey editor", value: "yes" },
+      { name: "Data point submissions", value: "1000 Max." },
+      { name: "Data export formats", value: 2 },
+      {
+        name: "Data monitoring (multiple forms within a survey)",
+        value: "yes",
+      },
+      { name: "User management", value: "4 users" },
+      { name: "Link to mobile data collection App (*Android)", value: "yes" },
+      { name: "Webforms", value: "yes" },
+      { name: "PowerBI integration*", value: "yes" },
+      {
+        name: "Help desk and support (in English)",
+        value: "Service package inc.",
+      },
+    ],
+  },
+
+  {
+    id: "flow-pro-plus",
+    name: "Flow Pro +",
+    price: "Custom",
+    note: "Get more from your plan",
+    features: [
+      { name: "Languages", value: "EN/FR/ES" },
+      { name: "Configuration", value: "Configuration service" },
+      { name: "Survey editor", value: "yes" },
+      { name: "Data point submissions", value: "Based on org. needs" },
+      { name: "Data export formats", value: 4 },
+      {
+        name: "Data monitoring (multiple forms within a survey)",
+        value: "yes",
+      },
+      { name: "User management", value: "Unlimited users" },
+      { name: "Link to mobile data collection App (*Android)", value: "yes" },
+      { name: "Webforms", value: "yes" },
+      { name: "PowerBI integration*", value: "yes" },
+      {
+        name: "Help desk and support (in English)",
+        value: "Service package inc.",
+      },
+    ],
+  },
+];

landing/src/components/pricing/pricing-tab/index.js

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import "./index.scss";
+import Button from "../../reusable/button";
+import { planData } from "../data";
+import { ReactComponent as Check } from "../../../images/check.svg";
+import { ReactComponent as Cross } from "../../../images/cross.svg";
+
+const PricingTab = () => {
+  const [selected, setSelected] = useState("flow-basic");
+  const selectedPlan = planData.find((plan) => plan.id === selected);
+
+  const isSelected = (plan) => selectedPlan.id === plan;
+
+  return (
+    <div className="pricing-mobile">
+      <ul className="tab-list">
+        <li
+          className={`list-item ${isSelected("flow-basic") && "selected"}`}
+          onClick={() => setSelected("flow-basic")}
+        >
+          Flow Basic
+        </li>
+        <li
+          className={`list-item ${isSelected("flow-pro") && "selected"}`}
+          onClick={() => setSelected("flow-pro")}
+        >
+          Flow Pro
+        </li>
+        <li
+          className={`list-item ${isSelected("flow-pro-plus") && "selected"}`}
+          onClick={() => setSelected("flow-pro-plus")}
+        >
+          Flow Custom
+        </li>
+      </ul>
+
+      <div className="plan">
+        {selected === "flow-pro" && (
+          <div className="most-popular">Most popular</div>
+        )}
+        <h3 className="plan-name">{selectedPlan.name}</h3>
+        <div className="plan-price">{selectedPlan.price}</div>
+        <small className="plan-note">{selectedPlan.note}</small>
+        <Button
+          type="filled"
+          text={
+            selectedPlan.name.toLowerCase() === "flow pro +"
+              ? "Contact sales"
+              : "Get started"
+          }
+          linkTo="/signup"
+        />
+      </div>
+
+      <table className="features-table">
+        <tbody>
+          <tr className="features-row">
+            <td className="feature">
+              <b>Features</b>
+            </td>
+            <td className="empty-row"></td>
+          </tr>
+          {selectedPlan.features.map((feature, index) => {
+            return (
+              <tr key={index} className="features-row">
+                <td className="feature-name">{feature.name}</td>
+                <td className="feature-value">
+                  {feature.value === "yes" ? (
+                    <div className="check">
+                      <Check />
+                    </div>
+                  ) : feature.value === "no" ? (
+                    <div className="cross">
+                      <Cross />
+                    </div>
+                  ) : (
+                    feature.value
+                  )}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      <small className="note">
+        *PowerBI integration will be gauged based on familiarity with the tool
+        by partner
+      </small>
+    </div>
+  );
+};
+
+export default PricingTab;

landing/src/components/pricing/pricing-tab/index.scss

@@ -0,0 +1,115 @@
+@import "../../../variables.scss";
+
+.pricing-mobile {
+  padding: 30px 20px;
+  .tab-list {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 25px;
+    .list-item {
+      padding: 10px;
+      font-size: 12px;
+      line-height: 16px;
+      color: $grey;
+      border-bottom: 1px solid $grey;
+      cursor: pointer;
+      transition: all ease-out 0.5s;
+      &.selected {
+        color: $black;
+        border-bottom: 1px solid $orange;
+      }
+    }
+  }
+
+  .plan {
+    text-align: center;
+    .most-popular {
+      max-width: max-content;
+      margin: auto;
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 22px;
+      padding: 10px 15px;
+      background-color: #ffffff;
+      border-radius: 10px;
+    }
+    .plan-name,
+    .plan-note {
+      color: $grey;
+    }
+    .plan-name,
+    .feature {
+      font-size: 16px;
+      line-height: 20px;
+    }
+    .plan-name {
+      margin-bottom: 12px;
+    }
+
+    .plan-price {
+      font-weight: 700;
+      font-size: 24px;
+      line-height: 28px;
+      margin-bottom: 10px;
+    }
+    .plan-note {
+      display: block;
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 15px;
+    }
+    button {
+      max-width: max-content;
+      margin: auto;
+    }
+  }
+
+  .features-table {
+    width: 100%;
+    max-width: calc(calc(136px * 2) + 8px);
+    margin: 20px auto;
+    margin: auto;
+    border-collapse: collapse !important;
+    .features-row {
+      border-top: 16px solid transparent;
+    }
+    .feature,
+    .feature-name {
+      font-size: 16px;
+      line-height: 22px;
+      text-align: right;
+      max-width: 136px;
+    }
+    .feature-name,
+    .feature-value {
+      width: 100%;
+      max-width: 136px;
+    }
+    .feature {
+      border-bottom: 20px solid transparent;
+    }
+    .feature-name {
+      display: block;
+    }
+
+    .feature-value {
+      text-align: center;
+      margin-left: 8px;
+      font-size: 14px;
+      line-height: 20px;
+      .check path {
+        fill: $orange;
+      }
+    }
+  }
+  .note {
+    display: block;
+    font-size: 14px;
+    line-height: 20px;
+    color: $grey;
+    margin-top: 20px;
+  }
+  @media (min-width: 601px) {
+    display: none;
+  }
+}