add billing section links to the organization switcher and organization settings

resources/js/Components/OrganizationSwitcher.vue

@@ -4,6 +4,7 @@ import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
 import { router, usePage } from '@inertiajs/vue3';
 import type { Organization, User } from '@/types/models';
+import { isBillingActivated } from '@/utils/billing';
 
 const page = usePage<{
     jetstream: {
@@ -80,7 +81,15 @@ const switchToTeam = (team: Organization) => {
                             page.props.auth.user.current_team.id
                         )
                     ">
-                    Team Settings
+                    Organization Settings
+                </DropdownLink>
+
+                <DropdownLink
+                    v-if="isBillingActivated()"
+                    href="
+                        /billing
+                    ">
+                    Billing
                 </DropdownLink>
 
                 <DropdownLink

resources/js/Pages/Teams/Create.vue

@@ -4,10 +4,10 @@ import CreateTeamForm from '@/Pages/Teams/Partials/CreateTeamForm.vue';
 </script>
 
 <template>
-    <AppLayout title="Create Team">
+    <AppLayout title="Create Organization">
         <template #header>
             <h2 class="font-semibold text-xl text-white leading-tight">
-                Create Team
+                Create Organization
             </h2>
         </template>
 

resources/js/Pages/Teams/Partials/CreateTeamForm.vue

@@ -26,7 +26,7 @@ const page = usePage<{
 
 <template>
     <FormSection @submitted="createTeam">
-        <template #title> Team Details</template>
+        <template #title> Organization Details</template>
 
         <template #description>
             Create a new team to collaborate with others on projects.
@@ -34,7 +34,7 @@ const page = usePage<{
 
         <template #form>
             <div class="col-span-6">
-                <InputLabel value="Team Owner" />
+                <InputLabel value="Organization Owner" />
 
                 <div class="flex items-center mt-2">
                     <img
@@ -54,7 +54,7 @@ const page = usePage<{
             </div>
 
             <div class="col-span-6 sm:col-span-4">
-                <InputLabel for="name" value="Team Name" />
+                <InputLabel for="name" value="Organization Name" />
                 <TextInput
                     id="name"
                     v-model="form.name"

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
+import { Link, useForm } from '@inertiajs/vue3';
 import ActionMessage from '@/Components/ActionMessage.vue';
 import FormSection from '@/Components/FormSection.vue';
 import InputError from '@/Components/InputError.vue';
@@ -8,6 +8,8 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
 import TextInput from '@/Components/TextInput.vue';
 import type { Organization } from '@/types/models';
 import type { Permissions } from '@/types/jetstream';
+import { CreditCardIcon } from '@heroicons/vue/20/solid';
+import { isBillingActivated } from '@/utils/billing';
 
 const props = defineProps<{
     team: Organization;
@@ -29,7 +31,7 @@ const updateTeamName = () => {
 
 <template>
     <FormSection @submitted="updateTeamName">
-        <template #title> Team Name</template>
+        <template #title> Organization Name</template>
 
         <template #description>
             The team's name and owner information.
@@ -37,29 +39,39 @@ const updateTeamName = () => {
 
         <template #form>
             <!-- Organization Owner Information -->
-            <div class="col-span-6">
-                <InputLabel value="Team Owner" />
+            <div class="col-span-6 flex items-center justify-between">
+                <div class="">
+                    <InputLabel value="Team Owner" />
 
-                <div class="flex items-center mt-2">
-                    <img
-                        class="w-12 h-12 rounded-full object-cover"
-                        :src="team.owner.profile_photo_url"
-                        :alt="team.owner.name" />
+                    <div class="flex items-center mt-2">
+                        <img
+                            class="w-12 h-12 rounded-full object-cover"
+                            :src="team.owner.profile_photo_url"
+                            :alt="team.owner.name" />
 
-                    <div class="ms-4 leading-tight">
-                        <div class="text-white">
-                            {{ team.owner.name }}
-                        </div>
-                        <div class="text-muted text-sm">
-                            {{ team.owner.email }}
+                        <div class="ms-4 leading-tight">
+                            <div class="text-white">
+                                {{ team.owner.name }}
+                            </div>
+                            <div class="text-muted text-sm">
+                                {{ team.owner.email }}
+                            </div>
                         </div>
                     </div>
                 </div>
+                <div>
+                    <Link href="/billing">
+                        <PrimaryButton v-if="isBillingActivated()">
+                            <CreditCardIcon class="w-5 h-5 me-2" />
+                            Go to Billing
+                        </PrimaryButton>
+                    </Link>
+                </div>
             </div>
 
             <!-- Organization Name -->
             <div class="col-span-6 sm:col-span-4">
-                <InputLabel for="name" value="Team Name" />
+                <InputLabel for="name" value="Organization Name" />
 
                 <TextInput
                     id="name"

resources/js/Pages/Teams/Show.vue

@@ -16,10 +16,10 @@ defineProps<{
 </script>
 
 <template>
-    <AppLayout title="Team Settings">
+    <AppLayout title="Organization Settings">
         <template #header>
             <h2 class="font-semibold text-xl text-white leading-tight">
-                Team Settings
+                Organization Settings
             </h2>
         </template>
 

resources/js/utils/billing.ts

@@ -0,0 +1,3 @@
+export function isBillingActivated() {
+    return true;
+}