feat: payment methods preferences page

packages/webapp/src/constants/preferencesMenu.tsx

@@ -16,6 +16,10 @@ export default [
     text: <T id={'users'} />,
     href: '/preferences/users',
   },
+  {
+    text: 'Payment Methods',
+    href: '/preferences/payment-methods'
+  },
   {
     text: <T id={'preferences.estimates'} />,
     href: '/preferences/estimates',

packages/webapp/src/containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage.tsx

@@ -0,0 +1,67 @@
+// @ts-nocheck
+import styled from 'styled-components';
+import { Box, Card, Group, Stack } from '@/components';
+import { StripeLogo } from '@/icons/StripeLogo';
+import { Button, Classes, Intent, Text } from '@blueprintjs/core';
+
+export default function PreferencesPaymentMethodsPage() {
+  return (
+    <PaymentMethodsRoot>
+      <Text className={Classes.TEXT_MUTED} style={{ marginBottom: 20 }}>
+        Accept payments from all the major debit and credit card networks
+        through the supported payment gateways.
+      </Text>
+
+      <Stack>
+        <StripePaymentMethod />
+      </Stack>
+    </PaymentMethodsRoot>
+  );
+}
+
+function StripePaymentMethod() {
+  return (
+    <Card style={{ margin: 0 }}>
+      <Group position="apart">
+        <StripeLogo />
+        <Group>
+          <Button intent={Intent.PRIMARY} small>
+            Set it Up
+          </Button>
+        </Group>
+      </Group>
+
+      <PaymentDescription
+        className={Classes.TEXT_MUTED}
+        style={{ fontSize: 13 }}
+      >
+        Stripe is an online payment processing platform that allows you to
+        receive one-time and recurring payments securely from customers. It also
+        manages all your payments and makes reconciliation a breeze. You can set
+        it up in no time and get paid faster. 
+      </PaymentDescription>
+
+      <PaymentFooter>
+        <Text>
+          <a href={'#'}>View Stripe's Transaction Fees</a>
+        </Text>
+      </PaymentFooter>
+    </Card>
+  );
+}
+
+const PaymentMethodsRoot = styled(Box)`
+  witdth: 100%;
+  max-width: 700px;
+  margin: 20px;
+`;
+
+const PaymentDescription = styled(Text)`
+  font-size: 13px;
+  margin-top: 12px;
+`;
+
+const PaymentFooter = styled(Box)`
+  margin-top: 14px;
+  font-size: 12px;
+`;

packages/webapp/src/icons/StripeLogo.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+interface StripeLogoProps extends React.SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+}
+
+export const StripeLogo: React.FC<StripeLogoProps> = ({
+  width = 70,
+  height = 30,
+  ...props
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 70 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M69.6155 15.5857C69.6155 10.7127 67.2309 6.86761 62.6732 6.86761C58.0963 6.86761 55.3271 10.7127 55.3271 15.5476C55.3271 21.2771 58.5963 24.1705 63.2886 24.1705C65.5771 24.1705 67.3078 23.6565 68.6155 22.9332V19.1262C67.3078 19.7734 65.8078 20.1731 63.904 20.1731C62.0386 20.1731 60.3848 19.5259 60.1732 17.2798H69.5771C69.5771 17.0323 69.6155 16.0425 69.6155 15.5857ZM60.1155 13.7773C60.1155 11.6264 61.4425 10.7317 62.654 10.7317C63.8271 10.7317 65.0771 11.6264 65.0771 13.7773H60.1155ZM47.904 6.86761C46.0194 6.86761 44.8078 7.74322 44.1348 8.35234L43.8848 7.17217H39.654V29.367L44.4617 28.3582L44.4809 22.9712C45.1732 23.4662 46.1925 24.1705 47.8848 24.1705C51.3271 24.1705 54.4617 21.4294 54.4617 15.3953C54.4425 9.87514 51.2694 6.86761 47.904 6.86761ZM46.7502 19.9827C45.6155 19.9827 44.9425 19.583 44.4809 19.0881L44.4617 12.0261C44.9617 11.4741 45.654 11.0934 46.7502 11.0934C48.5002 11.0934 49.7117 13.035 49.7117 15.5285C49.7117 18.0792 48.5194 19.9827 46.7502 19.9827ZM33.0386 5.74454L37.8655 4.71665V0.852539L33.0386 1.8614V5.74454ZM33.0386 7.1912H37.8655V23.8469H33.0386V7.1912ZM27.8655 8.5998L27.5578 7.1912H23.404V23.8469H28.2117V12.5591C29.3463 11.0934 31.2694 11.3599 31.8655 11.5693V7.1912C31.2502 6.96278 29.0002 6.54401 27.8655 8.5998ZM18.2502 3.0606L13.5578 4.05042L13.5386 19.2975C13.5386 22.1147 15.6732 24.1895 18.5194 24.1895C20.0963 24.1895 21.2502 23.904 21.8848 23.5613V19.6972C21.2694 19.9447 18.2309 20.8203 18.2309 18.0031V11.2457H21.8848V7.1912H18.2309L18.2502 3.0606ZM5.25015 12.0261C5.25015 11.2837 5.86554 10.9982 6.88477 10.9982C8.34631 10.9982 10.1925 11.436 11.654 12.2165V7.74322C10.0578 7.11506 8.48092 6.86761 6.88477 6.86761C2.98092 6.86761 0.384766 8.88532 0.384766 12.2545C0.384766 17.5082 7.69246 16.6706 7.69246 18.9358C7.69246 19.8114 6.92323 20.097 5.8463 20.097C4.25015 20.097 2.21169 19.4498 0.596304 18.5742V23.1045C2.38477 23.8659 4.19246 24.1895 5.8463 24.1895C9.8463 24.1895 12.5963 22.2289 12.5963 18.8216C12.5771 13.1492 5.25015 14.158 5.25015 12.0261Z"
+      fill="#0A2540"
+    />
+  </svg>
+);

packages/webapp/src/routes/preferences.tsx

@@ -21,6 +21,13 @@ export const getPreferenceRoutes = () => [
     ),
     exact: true,
   },
+  {
+    path: `${BASE_URL}/payment-methods`,
+    component: lazy(
+      () => import('../containers/Preferences/PaymentMethods/PreferencesPaymentMethodsPage'),
+    ),
+    exact: true,
+  },
   {
     path: `${BASE_URL}/credit-notes`,
     component: lazy(() =>