first commit

common/resources/client/billing/billing-page/panels/active-plan-panel.tsx

@@ -0,0 +1,77 @@
+import {useBillingUser} from '@common/billing/billing-page/use-billing-user';
+import {FormattedDate} from '@common/i18n/formatted-date';
+import {BillingPlanPanel} from '@common/billing/billing-page/billing-plan-panel';
+import {Trans} from '@common/i18n/trans';
+import {FormattedPrice} from '@common/i18n/formatted-price';
+import {Button} from '@common/ui/buttons/button';
+import {Link} from 'react-router-dom';
+import {Fragment} from 'react';
+import {SectionHelper} from '@common/ui/section-helper';
+
+export function ActivePlanPanel() {
+  const {subscription} = useBillingUser();
+  if (!subscription?.price || !subscription?.product) return null;
+
+  const renewDate = (
+    <FormattedDate preset="long" date={subscription.renews_at} />
+  );
+
+  return (
+    <Fragment>
+      {subscription.past_due ? <PastDueMessage /> : null}
+      <BillingPlanPanel title={<Trans message="Current plan" />}>
+        <div className="mt-24 flex justify-between gap-20">
+          <div>
+            <div className="mb-2 text-xl font-bold">
+              {subscription.product.name}
+            </div>
+            <FormattedPrice
+              className="mb-2 text-xl"
+              price={subscription.price}
+            />
+            <div className="text-base">
+              <Trans
+                message="Your plan renews on :date"
+                values={{date: renewDate}}
+              />
+            </div>
+          </div>
+          <div className="w-[233px]">
+            <Button
+              variant="flat"
+              color="primary"
+              size="md"
+              className="mb-12 w-full"
+              elementType={Link}
+              to="/billing/change-plan"
+              disabled={subscription.gateway_name === 'none'}
+            >
+              <Trans message="Change plan" />
+            </Button>
+            <Button
+              variant="outline"
+              color="danger"
+              size="md"
+              className="w-full"
+              elementType={Link}
+              to="/billing/cancel"
+            >
+              <Trans message="Cancel plan" />
+            </Button>
+          </div>
+        </div>
+      </BillingPlanPanel>
+    </Fragment>
+  );
+}
+
+function PastDueMessage() {
+  return (
+    <SectionHelper
+      className="mb-24"
+      color="danger"
+      title="Payment is past due"
+      description="Your recent recurring payment has failed with the payment method we have on file. Please update your payment method to avoid any service interruptions."
+    />
+  );
+}