refactor: scope providers by route and use XState selectors

src/app/subscription/layout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import { PaymentRouteProvider } from "@/providers/payment-route-provider";
+
+export default function SubscriptionLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <PaymentRouteProvider>{children}</PaymentRouteProvider>;
+}