From 884cd10a34c8017a5ddb10d84a79ffa20dbf673f Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 16 Apr 2024 00:26:50 +0200
Subject: [PATCH] add billing section links to the organization switcher and
 organization settings

---
 e2e/organization.spec.ts                      |  8 ++--
 .../js/Components/OrganizationSwitcher.vue    | 11 ++++-
 resources/js/Pages/Teams/Create.vue           |  4 +-
 .../Pages/Teams/Partials/CreateTeamForm.vue   |  6 +--
 .../Teams/Partials/UpdateTeamNameForm.vue     | 44 ++++++++++++-------
 resources/js/Pages/Teams/Show.vue             |  4 +-
 resources/js/utils/billing.ts                 |  3 ++
 7 files changed, 52 insertions(+), 28 deletions(-)
 create mode 100644 resources/js/utils/billing.ts

diff --git a/e2e/organization.spec.ts b/e2e/organization.spec.ts
index 4b84f4f9..01754d4c 100644
--- a/e2e/organization.spec.ts
+++ b/e2e/organization.spec.ts
@@ -4,14 +4,14 @@ import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 async function goToOrganizationSettings(page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
     await page.locator('[data-testid="organization_switcher"]:visible').click();
-    await page.getByText('Team Settings').click();
+    await page.getByText('Organization Settings').click();
 }
 
 test('test that organization name can be updated', async ({ page }) => {
     await goToOrganizationSettings(page);
-    await page.getByLabel('Team Name').fill('NEW ORG NAME');
-    await page.getByLabel('Team Name').press('Enter');
-    await page.getByLabel('Team Name').press('Meta+r');
+    await page.getByLabel('Organization Name').fill('NEW ORG NAME');
+    await page.getByLabel('Organization Name').press('Enter');
+    await page.getByLabel('Organization Name').press('Meta+r');
     await expect(
         page.locator('[data-testid="organization_switcher"]:visible')
     ).toContainText('NEW ORG NAME');
diff --git a/resources/js/Components/OrganizationSwitcher.vue b/resources/js/Components/OrganizationSwitcher.vue
index f501e26e..55717e6a 100644
--- a/resources/js/Components/OrganizationSwitcher.vue
+++ b/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
diff --git a/resources/js/Pages/Teams/Create.vue b/resources/js/Pages/Teams/Create.vue
index 381e441f..3251bc73 100644
--- a/resources/js/Pages/Teams/Create.vue
+++ b/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>
 
diff --git a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
index 91d58b9a..bc8bbcbb 100644
--- a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
+++ b/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"
diff --git a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue b/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
index 00e22eef..2baec305 100644
--- a/resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue
+++ b/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"
diff --git a/resources/js/Pages/Teams/Show.vue b/resources/js/Pages/Teams/Show.vue
index f00b7f54..e6acbe37 100644
--- a/resources/js/Pages/Teams/Show.vue
+++ b/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>
 
diff --git a/resources/js/utils/billing.ts b/resources/js/utils/billing.ts
new file mode 100644
index 00000000..f7cc0092
--- /dev/null
+++ b/resources/js/utils/billing.ts
@@ -0,0 +1,3 @@
+export function isBillingActivated() {
+    return true;
+}