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 {
diff --git a/src/components/patterns/PricingTable/PricingTable.js b/src/components/patterns/PricingTable/PricingTable.js
index 353456505..d264735a1 100644
--- a/src/components/patterns/PricingTable/PricingTable.js
+++ b/src/components/patterns/PricingTable/PricingTable.js
@@ -31,7 +31,8 @@ const getPlanDescription = reqs => `${toLocale(reqs)} daily requests`
const TOOLTIPS = {
'Rate Limit':
'Maximum number of requests you can consume until reach the quota.',
- Caching: 'Speed up response timing caching payload for same API calls.',
+ 'Caching Layer':
+ 'Speed up response timing caching payload for same API calls.',
'Media Detection':
'Ability to detect the original streaming source for video or audio',
'Color Detection':
@@ -40,7 +41,8 @@ const TOOLTIPS = {
'Technical assistance for resolving questions and help you integrate the service.',
'Contextual Information':
'Detection of extra information based on the type of data.',
- Proxy: 'Setup a proxy between API requests and target URL destination.'
+ 'Proxy Resolution':
+ 'Setup a proxy between API requests and target URL destination.'
}
const Price = styled(Subhead)`
@@ -206,8 +208,8 @@ function PricingTable ({ apiKey, stripeKey, apiEndpoint }) {
]}
/>
-
-
+
+
-
+
{
/>
The proxy server provided needs follow the schema `host:port:username:password`.
+
+You can esure proxy bypass is properly done checking `x-fetch-mode` header on response, whose value should be `fetch-proxy`.
+
+ {
+ const { status, data, response } = await mql(
+ 'https://www.instagram.com/p/BvDTdWdnzkj/', {
+ apiKey: 'MyApiToken',
+ proxy: 'superproxy.cool:22225:603f60f5:*****'
+ })
+
+ console.log(response.headers['x-fetch-mode']) // => fetch-proxy
+}
+ `
+ }}
+/>