feat: show subscription info on billing page (#14747)

airbyte-webapp/src/components/ui/BorderedTiles/BorderedTiles.module.scss

@@ -1,48 +1,45 @@
 @use "scss/colors";
 @use "scss/variables";
 
-$min-width-horizontal: 900px;
+$min-width-small: 650px;
+$min-width-medium: 900px;
+$min-width-extra-wide: 1100px;
 
 .borderedTiles {
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-template-rows: 1fr;
-  gap: variables.$border-thin;
-  background: colors.$grey-100;
-  border: variables.$border-thin solid colors.$grey-100;
-  border-radius: variables.$border-radius-md;
   container-type: inline-size;
 
-  &__tile {
-    grid-row: 1 / 1;
-    background: colors.$foreground;
+  &__grid {
+    background: colors.$grey-100;
+    border: variables.$border-thin solid colors.$grey-100;
+    border-radius: variables.$border-radius-md;
+    display: grid;
+    grid-template-rows: 1fr;
+    gap: variables.$border-thin;
     overflow: hidden;
-    padding: variables.$spacing-xl;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
 
-    @container (max-width: #{$min-width-horizontal}) {
-      grid-row: auto;
+    @container (max-width: #{$min-width-medium}) {
+      grid-auto-flow: row;
     }
 
-    &:first-child {
-      border-top-left-radius: variables.$border-radius-md;
-      border-bottom-left-radius: variables.$border-radius-md;
+    &:has(> .borderedTiles__tile:nth-child(4)) {
+      grid-auto-flow: unset;
+      grid-template-columns: repeat(4, 1fr);
 
-      @container (max-width: #{$min-width-horizontal}) {
-        border-top-left-radius: variables.$border-radius-md;
-        border-top-right-radius: variables.$border-radius-md;
-        border-bottom-left-radius: 0;
+      @container (max-width: #{$min-width-extra-wide}) {
+        grid-template-columns: repeat(2, 1fr);
       }
-    }
-
-    &:last-child {
-      border-top-right-radius: variables.$border-radius-md;
-      border-bottom-right-radius: variables.$border-radius-md;
 
-      @container (max-width: #{$min-width-horizontal}) {
-        border-top-right-radius: 0;
-        border-bottom-left-radius: variables.$border-radius-md;
-        border-bottom-right-radius: variables.$border-radius-md;
+      @container (max-width: #{$min-width-small}) {
+        grid-template-columns: 1fr;
       }
     }
   }
+
+  &__tile {
+    background: colors.$foreground;
+    overflow: hidden;
+    padding: variables.$spacing-xl;
+  }
 }

airbyte-webapp/src/components/ui/BorderedTiles/BorderedTiles.tsx

@@ -4,7 +4,11 @@ import { PropsWithChildren } from "react";
 import styles from "./BorderedTiles.module.scss";
 
 export const BorderedTiles: React.FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
-  return <div className={classNames(className, styles.borderedTiles)}>{children}</div>;
+  return (
+    <div className={classNames(className, styles.borderedTiles)}>
+      <div className={styles.borderedTiles__grid}>{children}</div>
+    </div>
+  );
 };
 
 export const BorderedTile: React.FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {

airbyte-webapp/src/core/api/hooks/billing.ts

@@ -12,7 +12,7 @@ import { useRequestOptions } from "../useRequestOptions";
 
 export const billingKeys = {
   all: [SCOPE_ORGANIZATION, "billing"] as const,
-  upcomingInvoice: (organizationId: string) => [...billingKeys.all, "upcomingInvoice", organizationId] as const,
+  subscriptionInfo: (organizationId: string) => [...billingKeys.all, "subscriptionInfo", organizationId] as const,
   invoices: (organizationId: string) => [...billingKeys.all, "invoices", organizationId] as const,
   paymentMethod: (organizationId: string) => [...billingKeys.all, "paymentMethod", organizationId] as const,
 };
@@ -50,7 +50,7 @@ export const useGetPaymentInformation = (organizationId: string) => {
 export const useGetOrganizationSubscriptionInfo = (organizationId: string) => {
   const requestOptions = useRequestOptions();
 
-  return useQuery(billingKeys.upcomingInvoice(organizationId), () =>
+  return useQuery(billingKeys.subscriptionInfo(organizationId), () =>
     getSubscriptionInfo({ organizationId }, requestOptions)
   );
 };

airbyte-webapp/src/locales/en.json

@@ -1093,6 +1093,9 @@
   "settings.organization.billing.billingInformation": "Billing information",
   "settings.organization.billing.billingInformationError": "Error loading billing information",
   "settings.organization.billing.update": "Update",
+  "settings.organization.billing.plan": "Plan",
+  "settings.organization.billing.planError": "Error loading plan information",
+  "settings.organization.billing.subscriptionCancelDate": "Subscription ends on",
   "settings.organization.billing.accountBalance": "Account balance",
   "settings.organization.billing.accountBalanceError": "Error loading account balance",
   "settings.organization.billing.remainingCreditsBanner": "You have {amount} remaining credits.",

airbyte-webapp/src/packages/cloud/views/billing/OrganizationBillingPage/OrganizationBillingPage.tsx

@@ -27,6 +27,7 @@ import { BillingBanners } from "./BillingBanners";
 import { BillingInformation } from "./BillingInformation";
 import { Invoices } from "./Invoices";
 import { PaymentMethod } from "./PaymentMethod";
+import { Subscription } from "./Subscription";
 import { useRedirectToCustomerPortal } from "../../../area/billing/utils/useRedirectToCustomerPortal";
 
 export const OrganizationBillingPage: React.FC = () => {
@@ -70,6 +71,8 @@ export const OrganizationBillingPage: React.FC = () => {
           <BillingBanners />
 
           <BorderedTiles>
+            {!noSubscriptionExists && <Subscription />}
+
             {!hideAccountBalance && <AccountBalance />}
 
             <BorderedTile>

airbyte-webapp/src/packages/cloud/views/billing/OrganizationBillingPage/Subscription/Subscription.tsx

@@ -0,0 +1,49 @@
+import { FormattedDate, FormattedMessage } from "react-intl";
+
+import { BorderedTile } from "components/ui/BorderedTiles";
+import { Box } from "components/ui/Box";
+import { DataLoadingError } from "components/ui/DataLoadingError";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
+import { Heading } from "components/ui/Heading";
+import { LoadingSkeleton } from "components/ui/LoadingSkeleton";
+import { Text } from "components/ui/Text";
+
+import { useCurrentWorkspace, useGetOrganizationSubscriptionInfo } from "core/api";
+
+export const Subscription: React.FC = () => {
+  const { organizationId } = useCurrentWorkspace();
+  const { data: subscription, isLoading, isError } = useGetOrganizationSubscriptionInfo(organizationId);
+  return (
+    <BorderedTile>
+      <Heading as="h2" size="sm">
+        <FormattedMessage id="settings.organization.billing.plan" />
+      </Heading>
+      <Box pt="xl">
+        {isLoading && <LoadingSkeleton />}
+        {subscription && (
+          <FlexContainer justifyContent="space-between" gap="lg" direction="column">
+            <Text size="lg">{subscription.name}</Text>
+            {subscription.cancellationDate && (
+              <FlexItem>
+                <FlexContainer alignItems="center" gap="xs">
+                  <Text>
+                    <FormattedMessage id="settings.organization.billing.subscriptionCancelDate" />
+                  </Text>
+                </FlexContainer>
+
+                <Text size="lg">
+                  <FormattedDate value={subscription.cancellationDate} />
+                </Text>
+              </FlexItem>
+            )}
+          </FlexContainer>
+        )}
+        {isError && (
+          <DataLoadingError>
+            <FormattedMessage id="settings.organization.billing.planError" />
+          </DataLoadingError>
+        )}
+      </Box>
+    </BorderedTile>
+  );
+};

airbyte-webapp/src/packages/cloud/views/billing/OrganizationBillingPage/Subscription/index.ts

@@ -0,0 +1 @@
+export { Subscription } from "./Subscription";