Implement plan details

ref DEV-2282

Author: louischan-oursky

portal/src/components/billing/CancelSubscriptionReminder.tsx

@@ -0,0 +1,28 @@
+import { Icon, Text } from "@fluentui/react";
+import { FormattedMessage } from "@oursky/react-messageformat";
+import React from "react";
+
+interface CancelSubscriptionReminderProps {
+  formattedBillingDate: string;
+}
+
+export function CancelSubscriptionReminder({
+  formattedBillingDate,
+}: CancelSubscriptionReminderProps): React.ReactElement {
+  return (
+    <section className="rounded-sm py-4 px-6 bg-brand-50">
+      <div className="flex items-center gap-x-1">
+        <Icon className="text-theme-primary text-[1rem]" iconName="Info" />
+        <Text variant="mediumPlus" className="font-semibold">
+          <FormattedMessage id="DowngradeReminder.title" />
+        </Text>
+      </div>
+      <Text block={true} variant="medium">
+        <FormattedMessage
+          id="DowngradeReminder.description"
+          values={{ date: formattedBillingDate }}
+        />
+      </Text>
+    </section>
+  );
+}

portal/src/components/billing/CurrentPlanCard.module.css

@@ -0,0 +1,9 @@
+.cardContainer {
+  @apply grid grid-flow-row gap-4;
+}
+
+.card {
+  @apply grid grid-cols-2 gap-8;
+  @apply rounded-xl border border-solid border-border-primary;
+  @apply p-8;
+}