da

fix button hover
limit user account
2026-09-23 00:30:43 -07:00 · 2023-08-25 14:44:10 +05:00 · 2023-08-15 21:39:36 +05:00 · 2023-08-15 21:04:52 +05:00 · 2023-08-15 15:37:37 +02:00
5 changed files with 111 additions and 8 deletions
@@ -12,6 +12,8 @@
        "@axa-fr/react-oidc": "^5.14.0",
        "@headlessui/react": "^1.5.0",
        "@heroicons/react": "^1.0.4",
+        "@stripe/react-stripe-js": "^2.1.2",
+        "@stripe/stripe-js": "^2.1.0",
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
@@ -3405,6 +3407,24 @@
        "@sinonjs/commons": "^1.7.0"
      }
    },
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.1.2.tgz",
+      "integrity": "sha512-2JcKRvOdMD698uGrY0cINLHb6XHnY24L+wlWlw2+TbI2aXlQZ9t8Mc+KssFES+EuNgISbrp7fJR3w/13epfiOw==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": "^1.44.1 || ^2.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.1.0.tgz",
+      "integrity": "sha512-AdMHWqIq/s3TLmoyuzdb6l21STKDKNm82cjce1VelyQGinVNjVgSEPH5UDtxENEP7OzgMZH8RTphFMi0fMJGLQ=="
+    },
    "node_modules/@surma/rollup-plugin-off-main-thread": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -19477,6 +19497,19 @@
        "@sinonjs/commons": "^1.7.0"
      }
    },
+    "@stripe/react-stripe-js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.1.2.tgz",
+      "integrity": "sha512-2JcKRvOdMD698uGrY0cINLHb6XHnY24L+wlWlw2+TbI2aXlQZ9t8Mc+KssFES+EuNgISbrp7fJR3w/13epfiOw==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@stripe/stripe-js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.1.0.tgz",
+      "integrity": "sha512-AdMHWqIq/s3TLmoyuzdb6l21STKDKNm82cjce1VelyQGinVNjVgSEPH5UDtxENEP7OzgMZH8RTphFMi0fMJGLQ=="
+    },
    "@surma/rollup-plugin-off-main-thread": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -7,6 +7,8 @@
    "@axa-fr/react-oidc": "^5.14.0",
    "@headlessui/react": "^1.5.0",
    "@heroicons/react": "^1.0.4",
+    "@stripe/react-stripe-js": "^2.1.2",
+    "@stripe/stripe-js": "^2.1.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
@@ -79,7 +81,7 @@
    ]
  },
  "devDependencies": {
-    "@types/react-syntax-highlighter": "^15.5.3",
-    "@playwright/test": "^1.36.2"
+    "@playwright/test": "^1.36.2",
+    "@types/react-syntax-highlighter": "^15.5.3"
  }
 }
@@ -633,16 +633,16 @@ export const Peers = () => {
          <Container style={{ paddingTop: "40px" }}>
            <Row>
              <Col span={24}>
-                <Title className="page-heading">{isAdmin ? "Peers" : "My peers"}</Title>
+                <Title className="page-heading">Peers</Title>
                {peers.length ? (
                  <Paragraph style={{ marginTop: "5px" }}>
-                    {isAdmin ? "A list of all machines and devices connected to your private network. Use this view to manage peers" :
-                        "A list of all your machines and devices that you connected to NetBird."}
+                    A list of all machines and devices connected to your private
+                    network. Use this view to manage peers
                  </Paragraph>
                ) : (
                  <Paragraph style={{ marginTop: "5px" }} type={"secondary"}>
-                    {isAdmin ? "A list of all machines and devices connected to your private network. Use this view to manage peers" :
-                        "A list of all your machines and devices that you connected to NetBird."}
+                    A list of all machines and devices connected to your private
+                    network. Use this view to manage peers
                  </Paragraph>
                )}

@@ -33,6 +33,7 @@ import ExpiresInInput, {
  expiresInToSeconds,
  secondsToExpiresIn,
 } from "./ExpiresInInput";
+// import CheckoutPage from "../components/CheckoutForm";
 import Column from "antd/lib/table/Column";
 import TableSpin from "../components/Spin";
 import { checkExpiresIn } from "../utils/common";
@@ -55,6 +56,8 @@ const { Title, Paragraph, Text } = Typography;
 const styleNotification = { marginTop: 85 };

 export const Settings = () => {
+    const [paymentCompleted, setPaymentCompleted] = useState(false);
+
  const { getTokenSilently } = useGetTokenSilently();
  const dispatch = useDispatch();
  const { pageSize, onChangePageSize, pageSizeOptions } = usePageSizeHelpers(
@@ -571,7 +574,11 @@ export const Settings = () => {
      "System settings",
      "sub2",
      <SettingOutlined />,
-      [getItem("Authentication", "auth"), getItem("Groups", "groups")],
+      [
+        getItem("Authentication", "auth"),
+        getItem("Groups", "groups"),
+        getItem("Billing", "billing"),
+     ],
      "group"
    ),
  ];
@@ -1122,6 +1129,67 @@ export const Settings = () => {
                </Col>
              </Row>
            )}
+            {billingClicked && (
+              <Row>
+                <Col span={24}>
+                  <Space
+                    direction="vertical"
+                    size="large"
+                    style={{ display: "flex" }}
+                  >
+                    <Row style={{ width: "100%" }}>
+                      <Col span={24}>
+                        <Card loading={loading}>
+                          <div
+                            style={{
+                              color: "rgba(0, 0, 0, 0.88)",
+                              fontWeight: "500",
+                              fontSize: "18px",
+                              marginBottom: "20px",
+                            }}
+                          >
+                            Billing - Free plan
+                          </div>
+                          <Row>
+                            <Col span={12} style={{ marginBottom: "20px" }}>
+                              <Alert
+                                description="The Free plan allows you to add up to 5 users and 100 peers."
+                                type="info"
+                                action={
+                                  <Space>
+                                    <Button size="small" type="primary">
+                                      Upgrade
+                                    </Button>
+                                  </Space>
+                                }
+                              />
+                            </Col>
+                            <Space size={30} wrap></Space>
+                            <Col span={24}>
+                              <Progress
+                                strokeColor={"#1890FF"}
+                                percent={60}
+                                size={[200, 20]}
+                                format={(percent) => `${users.length}/5 users`}
+                              />
+                            </Col>
+                            <Col span={24}>
+                              <Progress
+                                strokeColor={"#1890FF"}
+                                percent={10}
+                                size={[500, 20]}
+                                format={(percent) => `10/100 peers`}
+                              />
+                            </Col>
+                            {/* <CheckoutPage /> */}
+                          </Row>
+                        </Card>
+                      </Col>
+                    </Row>
+                  </Space>
+                </Col>
+              </Row>
+            )}
          </Col>
        </Row>
      </Container>
Author	SHA1	Message	Date
Sarooj Bukhari	8ad6952dae	da	2023-08-25 14:44:10 +05:00
Sarooj Bukhari	7e5595c365	fix button hover	2023-08-15 21:39:36 +05:00
Sarooj Bukhari	12687379cc	limit user account	2023-08-15 21:04:52 +05:00
braginini	62d80af186	Limit columns and navbar	2023-08-15 15:37:37 +02:00