fix: add new payment tab

Author: dedywahyudi

__tests__/shared/components/Settings/__snapshots__/index.jsx.snap

@@ -48,6 +48,10 @@ exports[`renders account setting page correctly 1`] = `
             "link": "preferences",
             "title": "Preferences",
           },
+          Object {
+            "link": "payment",
+            "title": "Payment",
+          },
         ]
       }
     />
@@ -805,6 +809,10 @@ exports[`renders preferences setting page correctly 1`] = `
             "link": "preferences",
             "title": "Preferences",
           },
+          Object {
+            "link": "payment",
+            "title": "Payment",
+          },
         ]
       }
     />
@@ -1559,6 +1567,10 @@ exports[`renders profile setting page correctly 1`] = `
             "link": "preferences",
             "title": "Preferences",
           },
+          Object {
+            "link": "payment",
+            "title": "Payment",
+          },
         ]
       }
     />
@@ -2319,6 +2331,10 @@ exports[`renders tools setting page correctly 1`] = `
             "link": "preferences",
             "title": "Preferences",
           },
+          Object {
+            "link": "payment",
+            "title": "Payment",
+          },
         ]
       }
     />

src/shared/actions/page/settings.js

@@ -11,6 +11,7 @@ export const TABS = {
   TOOLS: 'tools',
   ACCOUNT: 'account',
   PREFERENCES: 'preferences',
+  PAYMENT: 'payment',
 };
 
 export default createActions({

src/shared/components/Settings/Payment/index.jsx

@@ -0,0 +1,33 @@
+/* eslint-disable prefer-destructuring */
+import React from 'react';
+
+import ErrorWrapper from '../ErrorWrapper';
+
+import './styles.scss';
+
+export default class Payment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <ErrorWrapper>
+        <div styleName="payment-container">
+          <div styleName="header">
+            <h3>Payment Settings</h3>
+          </div>
+          <div styleName="platform-banner" />
+        </div>
+        <div styleName="footer" />
+      </ErrorWrapper>
+    );
+  }
+}
+
+Payment.defaultProps = {
+};
+
+Payment.propTypes = {
+};

src/shared/components/Settings/Payment/styles.scss

@@ -0,0 +1,83 @@
+@import '~styles/mixins';
+
+.payment-container {
+  background-color: $listing-filter-bg;
+  padding: $pad-xxxxl;
+  border-radius: 8px;
+  margin: 32px 0 32px;
+
+  @include xs-to-sm {
+    padding: $pad-xxl $pad-lg;
+    margin: 24px 0 24px;
+  }
+
+  .header {
+    margin: 0 0 40px;
+
+    @include xs-to-sm {
+      margin: 0 0 $pad-xxl;
+    }
+
+    h3 {
+      @include barlow-bold;
+
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 22px;
+      color: $tco-black;
+      text-transform: uppercase;
+
+      @include xs-to-md {
+        @include barlow-condensed-semi-bold;
+
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 24px;
+      }
+    }
+  }
+
+  .platform-banner {
+    background-color: $tc-white;
+    border-radius: 4px;
+    width: 100%;
+    padding: 32px;
+
+    @include xs-to-sm {
+      padding: 24px 16px;
+    }
+  }
+}
+
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+
+  .save-changes-btn {
+    @include roboto-bold;
+
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 50px !important;
+    background: #137d60 !important;
+    color: #fff !important;
+    text-transform: uppercase;
+    padding: 11px 23px;
+    margin: 0;
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  @include xs-to-md {
+    padding: $pad-xxxxl 0 $pad-sm;
+    border-top: 2px solid $color-black-10;
+
+    .save-changes-btn {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

src/shared/components/Settings/constants.js

@@ -12,6 +12,7 @@ export const SETTINGS_TABS = [
   { title: 'Tools', link: TABS.TOOLS },
   { title: 'Account', link: TABS.ACCOUNT },
   { title: 'Preferences', link: TABS.PREFERENCES },
+  { title: 'Payment', link: TABS.PAYMENT },
 ];
 
 export const PROFILE_SETTINGS = {

src/shared/components/Settings/index.jsx

@@ -16,6 +16,7 @@ import Tools from './Tools';
 import './style.scss';
 import Account from './Account';
 import Preferences from './Preferences';
+import Payment from './Payment';
 import TabSelector from './TabSelector';
 import { SETTINGS_TABS } from './constants';
 
@@ -140,6 +141,12 @@ export default function Settings(props) {
             />
           )
         }
+        {
+          newProps.settingsTab === TABS.PAYMENT
+          && (
+            <Payment />
+          )
+        }
       </div>
     </div>
   );

src/shared/routes/Settings/Router.jsx

@@ -16,7 +16,7 @@ import Error404 from 'components/Error404';
 export default function Router({ base }) {
   return (
     <Switch>
-      <Route component={Settings} exact path={`${base}/:settingsTab(profile|skills|tracks|tools|account|preferences)`} />
+      <Route component={Settings} exact path={`${base}/:settingsTab(profile|skills|tracks|tools|account|preferences|payment)`} />
       <Route component={EmailVerification} exact path={`${base}/account/changeEmail`} />
       <Route component={Success} exact path={`${base}/account/email-verification/success`} />
       <Route component={Failed} exact path={`${base}/account/email-verification/failure`} />