Formatting

dashboard/src/lib/hooks/useStripe.tsx

@@ -5,9 +5,11 @@ import { z } from "zod";
 import {
   ClientSecretResponse,
   CreditGrantsValidator,
+  InvoiceList,
+  InvoiceValidator,
   PaymentMethodValidator,
-  PlanValidator,
   Plan,
+  PlanValidator,
   UsageValidator,
   type CreditGrants,
   type PaymentMethod,
@@ -105,7 +107,7 @@ export const usePaymentMethods = (): TUsePaymentMethod => {
         setPaymentMethodList(data);
         return data;
       } catch (error) {
-        return null
+        return null;
       }
     }
   );
@@ -177,7 +179,7 @@ export const useSetDefaultPaymentMethod = (): TSetDefaultPaymentMethod => {
   const { currentProject } = useContext(Context);
 
   if (!currentProject?.billing_enabled) {
-    return { setDefaultPaymentMethod: async () => { } };
+    return { setDefaultPaymentMethod: async () => {} };
   }
 
   const setDefaultPaymentMethod = async (
@@ -203,7 +205,6 @@ export const useSetDefaultPaymentMethod = (): TSetDefaultPaymentMethod => {
 export const checkIfProjectHasPayment = (): TCheckHasPaymentEnabled => {
   const { currentProject } = useContext(Context);
 
-
   // Check if payment is enabled for the project
   const paymentEnabledReq = useQuery(
     ["checkPaymentEnabled", currentProject?.id],
@@ -226,9 +227,10 @@ export const checkIfProjectHasPayment = (): TCheckHasPaymentEnabled => {
         const data = z.boolean().parse(res.data);
         return data;
       } catch (error) {
-        return null
+        return null;
       }
-    });
+    }
+  );
 
   return {
     hasPaymentEnabled: paymentEnabledReq.data ?? null,
@@ -260,9 +262,10 @@ export const usePublishableKey = (): TGetPublishableKey => {
         );
         return res.data;
       } catch (error) {
-        return null
+        return null;
       }
-    });
+    }
+  );
 
   return {
     publishableKey: keyReq.data ?? null,
@@ -295,7 +298,7 @@ export const usePorterCredits = (): TGetCredits => {
         const creditGrants = CreditGrantsValidator.parse(res.data);
         return creditGrants;
       } catch (error) {
-        return null
+        return null;
       }
     }
   );
@@ -330,9 +333,10 @@ export const useCustomerPlan = (): TGetPlan => {
         const plan = PlanValidator.parse(res.data);
         return plan;
       } catch (error) {
-        return null
+        return null;
       }
-    });
+    }
+  );
 
   return {
     plan: planReq.data ?? null,
@@ -373,7 +377,8 @@ export const useCustomerUsage = (
       } catch (error) {
         return null;
       }
-    });
+    }
+  );
 
   return {
     usage: usageReq.data ?? null,
@@ -442,11 +447,12 @@ export const useCustomerInvoices = (): TGetInvoices => {
         const invoices = InvoiceValidator.array().parse(res.data);
         return invoices;
       } catch (error) {
-        return null
+        return null;
       }
-    });
+    }
+  );
 
   return {
     invoiceList: invoicesReq.data ?? null,
   };
-};
+};

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

@@ -46,7 +46,6 @@ function BillingPage(): JSX.Element {
   const { creditGrants } = usePorterCredits();
   const { plan } = useCustomerPlan();
   const { invoiceList } = useCustomerInvoices();
-  console.log(invoiceList)
 
   const {
     paymentMethodList,
@@ -251,91 +250,107 @@ function BillingPage(): JSX.Element {
       </Button>
       <Spacer y={2} />
 
-      {currentProject?.metronome_enabled && plan && plan.plan_name !== "" ? (
-        <>
-          <Text size={16}>Current usage</Text>
-          <Spacer y={1} />
-          <Text color="helper">
-            View the current usage of this billing period.
-          </Text>
-          <Spacer y={1} />
-          {usage?.length &&
-            usage.length > 0 &&
-            usage[0].usage_metrics.length > 0 ? (
-            <Flex>
-              <BarWrapper>
-                <Bars
-                  title="GiB Hours"
-                  fill="#8784D2"
-                  yKey="gib_hours"
-                  xKey="starting_on"
-                  data={processedData}
-                />
-              </BarWrapper>
-              <Spacer x={1} inline />
-              <BarWrapper>
-                <Bars
-                  title="CPU Hours"
-                  fill="#5886E0"
-                  yKey="cpu_hours"
-                  xKey="starting_on"
-                  data={processedData}
-                />
-              </BarWrapper>
-            </Flex>
-          ) : (
-            <Fieldset>
+      {currentProject?.metronome_enabled && (
+        <div>
+          {currentProject?.sandbox_enabled && (
+            <div>
+              <Text size={16}>Porter credit grants</Text>
+              <Spacer y={1} />
               <Text color="helper">
                 No usage data available for this billing period.
               </Text>
-            </Fieldset>
+              <Spacer y={1} />
+
+              <Container>
+                <Image src={gift} style={{ marginTop: "-2px" }} />
+                <Spacer inline x={1} />
+                <Text size={20}>
+                  {creditGrants && creditGrants.remaining_credits > 0
+                    ? `$${formatCredits(
+                        creditGrants.remaining_credits
+                      )}/$${formatCredits(creditGrants.granted_credits)}`
+                    : "$ 0.00"}
+                </Text>
+              </Container>
+              <Spacer y={2} />
+            </div>
           )}
-          <Spacer y={2} />
-        </>
-      ) : (
-        <Text>This project does not have an active billing plan.</Text>
-      )}
-      {showReferralModal && (
-        <Modal
-          closeModal={() => {
-            setShowReferralModal(false);
-          }}
-        >
-          <Text size={16}>Refer users to Porter</Text>
-          <Spacer y={1} />
-          <Text color="helper">
-            Earn $10 in free credits for each user you refer to Porter. Referred
-            users need to connect a payment method for credits to be added to
-            your account.
-          </Text>
-          <Spacer y={1} />
-          <Container row>
-            <ReferralCode>
-              Referral code:{" "}
-              {currentProject?.referral_code ? (
-                <Code>{currentProject.referral_code}</Code>
-              ) : (
-                "n/a"
-              )}
-            </ReferralCode>
-            <Spacer inline x={1} />
-            <CopyToClipboard
-              text={
-                window.location.origin +
-                "/register?referral=" +
-                currentProject?.referral_code
-              }
-              tooltip="Copied to clipboard"
-            >
-              <CopyButton>Copy referral link</CopyButton>
-            </CopyToClipboard>
-          </Container>
-          <Spacer y={1} />
-          <Text color="helper">
-            You have referred{" "}
-            {referralDetails ? referralDetails.referral_count : "?"}/{referralDetails?.max_allowed_referrals} users.
-          </Text>
-        </Modal>
+
+          <div>
+            <Text size={16}>Plan Details</Text>
+            <Spacer y={1} />
+            <Text color="helper">
+              View the details of the current billing plan of this project.
+            </Text>
+            <Spacer y={1} />
+
+            {plan && plan.plan_name !== "" ? (
+              <div>
+                <Text>Active Plan</Text>
+                <Spacer y={0.5} />
+                <Fieldset row>
+                  <Container row spaced>
+                    <Container row>
+                      <Text color="helper">{plan.plan_name}</Text>
+                    </Container>
+                    <Container row>
+                      {plan.trial_info !== undefined &&
+                      plan.trial_info.ending_before !== "" ? (
+                        <Text>
+                          Free trial ends{" "}
+                          {dayjs().to(dayjs(plan.trial_info.ending_before))}
+                        </Text>
+                      ) : (
+                        <Text>Started on {readableDate(plan.starting_on)}</Text>
+                      )}
+                    </Container>
+                  </Container>
+                </Fieldset>
+                <Spacer y={2} />
+                <Text size={16}>Current Usage</Text>
+                <Spacer y={1} />
+                <Text color="helper">
+                  View the current usage of this billing period.
+                </Text>
+                <Spacer y={1} />
+                {usage?.length &&
+                usage.length > 0 &&
+                usage[0].usage_metrics.length > 0 ? (
+                  <Flex>
+                    <BarWrapper>
+                      <Bars
+                        title="GiB Hours"
+                        fill="#8784D2"
+                        yKey="gib_hours"
+                        xKey="starting_on"
+                        data={processedData}
+                      />
+                    </BarWrapper>
+                    <Spacer x={1} inline />
+                    <BarWrapper>
+                      <Bars
+                        title="CPU Hours"
+                        fill="#5886E0"
+                        yKey="cpu_hours"
+                        xKey="starting_on"
+                        data={processedData}
+                      />
+                    </BarWrapper>
+                  </Flex>
+                ) : (
+                  <Fieldset>
+                    <Text color="helper">
+                      No usage data available for this billing period.
+                    </Text>
+                  </Fieldset>
+                )}
+                <Spacer y={2} />
+              </div>
+            ) : (
+              <Text>This project does not have an active billing plan.</Text>
+            )}
+          </div>
+        </div>
       )}
     </>
   );