feat: stripe integration

components/settings/profile-settings-form.tsx

@@ -4,11 +4,10 @@ import { saveProfileAction } from "@/app/(app)/settings/actions"
 import { FormError } from "@/components/forms/error"
 import { FormInput } from "@/components/forms/simple"
 import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { formatBytes, formatNumber } from "@/lib/utils"
 import { User } from "@prisma/client"
 import { CircleCheckBig } from "lucide-react"
 import { useActionState } from "react"
+import { SubscriptionPlan } from "./subscription-plan"
 
 export default function ProfileSettingsForm({ user }: { user: User }) {
   const [saveState, saveAction, pending] = useActionState(saveProfileAction, null)
@@ -32,13 +31,10 @@ export default function ProfileSettingsForm({ user }: { user: User }) {
 
         {saveState?.error && <FormError>{saveState.error}</FormError>}
       </form>
-      <Card className="mt-4 p-4">
-        <p>
-          Storage Used: {formatBytes(user.storageUsed)} /{" "}
-          {user.storageLimit > 0 ? formatBytes(user.storageLimit) : "Unlimited"}
-        </p>
-        <p>Tokens Balance: {formatNumber(user.tokenBalance)}</p>
-      </Card>
+
+      <div className="mt-10">
+        <SubscriptionPlan user={user} />
+      </div>
     </div>
   )
 }