feat: whyrating - initial project from turbostarter boilerplate

.context/turbostarter-framework-context/sections/extension/billing.md

@@ -0,0 +1,68 @@
+---
+title: Billing
+description: Get started with billing in TurboStarter.
+url: /docs/extension/billing
+---
+
+# Billing
+
+As you could guess, there is no sense in implementing the whole billing process inside the browser extension, so we're relying on the [web app](/docs/web/billing/overview) to handle it.
+
+> You probably won't display pricing tables inside a popup window, right?
+
+You can customize the whole flow and onboarding process when a user purchases a plan in your [web app](/docs/web/billing/overview).
+
+Then you would be able to easily fetch customer data to ensure that the user has access to correct extension features.
+
+## Fetching customer data
+
+When your user has purchased a plan from your landing page or web app, you can easily fetch their data using the [API](/docs/extension/api/client).
+
+To do so, just invoke the `getCustomer` query on the `billing` router:
+
+```tsx title="customer-screen.tsx"
+import { api } from "~/lib/api";
+
+export default function CustomerScreen() {
+  const { data: customer, isLoading } = useQuery({
+    queryKey: ["customer"],
+    queryFn: handle(api.billing.customer.$get),
+  });
+
+  if (isLoading) return <p>Loading...</p>;
+
+  return <p>{customer?.plan}</p>;
+}
+```
+
+You may also want to ensure that user is logged in before fetching their billing data to avoid unnecessary API calls.
+
+```tsx title="header.tsx"
+import { api } from "~/lib/api";
+import { authClient } from "~/lib/auth";
+
+export const User = () => {
+  const {
+    data: { user },
+  } = authClient.useSession();
+
+  const { data: customer } = useQuery({
+    queryKey: ["customer"],
+    queryFn: handle(api.billing.customer.$get),
+    enabled: !!user, // [!code highlight]
+  });
+
+  if (!user || !customer) {
+    return null;
+  }
+
+  return (
+    <div>
+      <p>{user.email}</p>
+      <p>{customer.plan}</p>
+    </div>
+  );
+};
+```
+
+Read more about [auth in extension](/docs/extension/auth/overview).