Add iframe

dashboard/src/lib/hooks/useStripe.tsx

@@ -45,6 +45,25 @@ type TGetPlan = {
   plan: Plan;
 };
 
+const embeddableDashboardColors = {
+  grayDark: "Gray_dark",
+  grayMedium: "Gray_medium",
+  grayLight: "Gray_light",
+  grayExtraLigth: "Gray_extralight",
+  white: "White",
+  primaryMedium: "Primary_medium",
+  primaryLight: "Primary_light",
+  usageLine0: "Usageline_0",
+  usageLine1: "Usageline_1",
+  usageLine2: "Usageline_2",
+  usageLine3: "Usageline_3",
+  usageLine4: "Usageline_4",
+  usageLine5: "Usageline_5",
+  usageLine6: "Usageline_6",
+  usageLine7: "Usageline_7",
+  usageLine8: "Usageline_8",
+};
+
 export const usePaymentMethods = (): TUsePaymentMethod => {
   const { currentProject } = useContext(Context);
 
@@ -160,6 +179,49 @@ export const checkIfProjectHasPayment = (): TCheckHasPaymentEnabled => {
   };
 };
 
+export const useCustomerDashboard = (dashboard: string): TGetUsageDashboard => {
+  const { currentProject } = useContext(Context);
+
+  const colorOverrides = [
+    { name: embeddableDashboardColors.grayDark, value: "#121212" },
+    { name: embeddableDashboardColors.grayMedium, value: "#DFDFE1" },
+    { name: embeddableDashboardColors.grayLight, value: "#DFDFE1" },
+    { name: embeddableDashboardColors.grayExtraLigth, value: "#00ff63" },
+    { name: embeddableDashboardColors.white, value: "#121212" },
+    { name: embeddableDashboardColors.primaryLight, value: "#121212" },
+    { name: embeddableDashboardColors.primaryMedium, value: "#DFDFE1" },
+  ];
+
+  // Return an embeddable dashboard for the customer
+  const dashboardReq = useQuery(
+    ["getUsageDashboard", currentProject?.id, dashboard],
+    async () => {
+      if (!currentProject?.id || currentProject.id === -1) {
+        return;
+      }
+      const res = await api.getUsageDashboard(
+        "<token>",
+        {
+          dashboard,
+          color_overrides: colorOverrides,
+        },
+        {
+          project_id: currentProject?.id,
+        }
+      );
+      console.log(res);
+      return res.data;
+    },
+    {
+      staleTime: Infinity,
+    }
+  );
+
+  return {
+    url: dashboardReq.data,
+  };
+};
+
 export const usePublishableKey = (): TGetPublishableKey => {
   const { currentProject } = useContext(Context);
 

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -156,6 +156,45 @@ function BillingPage(): JSX.Element {
             )}
             <Spacer y={1} />
           </div>
+
+          <Text size={16}>Usage</Text>
+          <Spacer y={1} />
+          <iframe
+            src={usageDashboard}
+            scrolling="no"
+            frameBorder={0}
+            allowTransparency={true}
+            style={{
+              width: "100%",
+              height: "80vh",
+              overflowY: "hidden",
+              border: "none",
+              backgroundColor: "#121212",
+            }}
+          ></iframe>
+          <Spacer y={1} />
+
+          <div>
+            {plan === undefined ? (
+              <Loading></Loading>
+            ) : (
+              <Fieldset>
+                <Container row>
+                  <Text size={14}>{plan.plan_name}</Text>
+                </Container>
+                {plan.trial_info !== undefined ? (
+                  <div>
+                    <Text size={13}>
+                      Trial Ending {relativeTime(plan.trial_info.ending_before)}
+                    </Text>
+                  </div>
+                ) : (
+                  <div></div>
+                )}
+              </Fieldset>
+            )}
+          </div>
+          <Spacer y={2} />
         </div>
       ) : (
         <div></div>