add billing section links to the organization switcher and organization settings

This commit is contained in:
Gregor Vostrak
2024-04-16 00:26:50 +02:00
parent e4bf56d55d
commit 884cd10a34
7 changed files with 52 additions and 28 deletions

View File

@@ -4,14 +4,14 @@ import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
async function goToOrganizationSettings(page) { async function goToOrganizationSettings(page) {
await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard'); await page.goto(PLAYWRIGHT_BASE_URL + '/dashboard');
await page.locator('[data-testid="organization_switcher"]:visible').click(); 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 }) => { test('test that organization name can be updated', async ({ page }) => {
await goToOrganizationSettings(page); await goToOrganizationSettings(page);
await page.getByLabel('Team Name').fill('NEW ORG NAME'); await page.getByLabel('Organization Name').fill('NEW ORG NAME');
await page.getByLabel('Team Name').press('Enter'); await page.getByLabel('Organization Name').press('Enter');
await page.getByLabel('Team Name').press('Meta+r'); await page.getByLabel('Organization Name').press('Meta+r');
await expect( await expect(
page.locator('[data-testid="organization_switcher"]:visible') page.locator('[data-testid="organization_switcher"]:visible')
).toContainText('NEW ORG NAME'); ).toContainText('NEW ORG NAME');

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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