diff --git a/package.json b/package.json index 6e5e08940..57899a50a 100644 --- a/package.json +++ b/package.json @@ -37,10 +37,9 @@ "gatsby" ], "dependencies": { - "@microlink/demo-links": "~1.0.1", + "@microlink/demo-links": "~1.0.2", "@microlink/mql": "~0.3.13", "@microlink/react": "~4.0.1", - "@rebass/components": "~4.0.0-1", "@tippy.js/react": "~2.2.2", "autoprefixer": "~9.6.0", "beauty-error": "~1.2.2", @@ -53,16 +52,16 @@ "download": "~7.1.0", "exists-file": "~3.0.2", "fromentries": "~1.1.0", - "gatsby": "~2.10.5", + "gatsby": "~2.11.7", "gatsby-plugin-canonical-urls": "~2.1.0", "gatsby-plugin-catch-links": "~2.1.0", - "gatsby-plugin-google-analytics": "~2.1.0", + "gatsby-plugin-google-analytics": "~2.1.1", "gatsby-plugin-meta-redirect": "~1.1.1", "gatsby-plugin-netlify": "~2.1.0", "gatsby-plugin-react-helmet": "~3.1.0", "gatsby-plugin-remove-trailing-slashes": "~2.1.0", "gatsby-plugin-sass": "~2.1.0", - "gatsby-plugin-sitemap": "~2.2.0", + "gatsby-plugin-sitemap": "~2.2.1", "gatsby-plugin-styled-components": "~3.1.0", "gatsby-redirect-from": "~0.2.1", "gatsby-source-filesystem": "~2.1.1", @@ -73,7 +72,7 @@ "git-jiggy": "~1.1.1", "graphiql": "~0.13.2", "graphiql-explorer": "~0.4.3", - "graphql": "~14.4.0", + "graphql": "~14.4.1", "human-number": "~1.0.4", "humanize-url": "~2.1.0", "json-future": "~2.2.4", @@ -98,7 +97,7 @@ "react-json-view": "~1.19.1", "react-live": "~2.1.2", "react-stripe-elements": "~3.0.0", - "react-syntax-highlighter": "~11.0.0", + "react-syntax-highlighter": "~11.0.1", "react-timeago": "~4.4.0", "rebass": "~3.1.1", "remark-slug": "~5.1.2", diff --git a/src/components/elements/PricePicker.js b/src/components/elements/PricePicker.js index 3203b31de..414acf0d8 100644 --- a/src/components/elements/PricePicker.js +++ b/src/components/elements/PricePicker.js @@ -2,48 +2,36 @@ import React, { Component } from 'react' import { Box, Select, Label } from 'components/elements' import humanNumber from 'human-number' +const createReqsLabels = reqsPerDay => ({ + reqsPerDay, + humanReqsPerDay: humanNumber(reqsPerDay), + monthlyPrice: calculateMonthlyPrice(reqsPerDay) +}) + const calculateMonthlyPrice = reqsPerDay => (reqsPerDay / 1000) * BASE_PLAN_PRICE export const BASE_PLAN_PRICE = 12 -export const BASE_PLAN_REQS = 1000 - -export const DEFAULT_PLAN = { - planId: 'pro-1k-v2', - reqsPerDay: BASE_PLAN_REQS, - humanReqsPerDay: humanNumber(BASE_PLAN_REQS), - monthlyPrice: calculateMonthlyPrice(BASE_PLAN_REQS) -} +export const PLANS = [ + { planId: 'pro-1k-v2', ...createReqsLabels(1000) }, + { planId: 'pro-2k-v2', ...createReqsLabels(2000) }, + { planId: 'pro-3k-v2', ...createReqsLabels(3000) }, + { planId: 'pro-10k-v2', ...createReqsLabels(10000) }, + { planId: 'pro-50k-v2', ...createReqsLabels(50000) } +] -export const PLANS = [DEFAULT_PLAN] - .concat([ - { planId: 'pro-3k-v2', reqsPerDay: 3000 }, - { planId: 'pro-10k-v2', reqsPerDay: 10000 }, - { planId: 'pro-50k-v2', reqsPerDay: 50000 }, - { planId: 'pro-100k-v2', reqsPerDay: 100000 }, - { planId: 'pro-500k-v2', reqsPerDay: 500000 }, - { planId: 'pro-1m-v2', reqsPerDay: 1000000 } - ]) - .reduce( - (acc, { planId, reqsPerDay }) => ({ - ...acc, - [reqsPerDay]: { - planId, - humanReqsPerDay: humanNumber(reqsPerDay), - monthlyPrice: calculateMonthlyPrice(reqsPerDay) - } - }), - {} - ) +export const DEFAULT_PLAN = PLANS[1] export default class extends Component { state = { ...DEFAULT_PLAN } handleChange = event => { event.preventDefault() - const { value: reqsPerDay } = event.target - const newState = { reqsPerDay, ...PLANS[reqsPerDay] } + const { value: humanReqsPerDay } = event.target + const newState = PLANS.find( + plan => plan.humanReqsPerDay === humanReqsPerDay + ) this.setState(newState) this.props.onChange(newState) } @@ -54,15 +42,11 @@ export default class extends Component {