WIP: billing /style

client/src/containers/Subscriptions/SubscriptionTabs.js

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { Tabs, Tab } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import BillingTab from './BillingTab';
+import LicenseTab from './LicenseTab';
+
+export const MeteredBillingTabs = ({ formik }) => {
+  const [animate, setAnimate] = useState(true);
+  const { formatMessage } = useIntl();
+
+  return (
+    <div>
+      <Tabs animate={animate} large={true}>
+        <Tab
+          title={formatMessage({ id: 'billing' })}
+          id={'billing'}
+          panel={<BillingTab formik={formik} />}
+        />
+        <Tab
+          title={formatMessage({ id: 'usage' })}
+          id={'usage'}
+          disabled={true}
+          // panel={'Usage'}
+        />
+      </Tabs>
+    </div>
+  );
+};
+
+export const PaymentMethodTabs = ({ formik }) => {
+  const [animate, setAnimate] = useState(true);
+  const { formatMessage } = useIntl();
+
+  return (
+    <div>
+      <Tabs animate={animate} large={true}>
+        <Tab
+          title={formatMessage({ id: 'license' })}
+          id={'license'}
+          panel={<LicenseTab formik={formik} />}
+        />
+        <Tab
+          title={formatMessage({ id: 'credit_card' })}
+          id={'credit_card'}
+          disabled={true}
+        />
+        <Tab
+          title={formatMessage({ id: 'paypal' })}
+          id={'paypal'}
+          disabled={true}
+        />
+      </Tabs>
+    </div>
+  );
+};