chore: Move frontend authorization to permission based system (#9709)

We previously relied on user roles to determine whether to render
specific routes in our frontend components. A permissions-based model is replacing this approach.


Follow up: #9695

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js

@@ -6,7 +6,9 @@ export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/billing'),
-      roles: ['administrator'],
+      meta: {
+        permissions: ['administrator'],
+      },
       component: SettingsContent,
       props: {
         headerTitle: 'BILLING_SETTINGS.TITLE',
@@ -18,7 +20,9 @@ export default {
           path: '',
           name: 'billing_settings_index',
           component: Index,
-          roles: ['administrator'],
+          meta: {
+            permissions: ['administrator'],
+          },
         },
       ],
     },