fix: #94 require billing name and email on team creation

ptah-sh · Aug 4, 2024 · a57f2b1 · a57f2b1
1 parent d2d1263
commit a57f2b1
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 40 deletions.
diff --git a/app/Actions/Jetstream/CreateTeam.php b/app/Actions/Jetstream/CreateTeam.php
@@ -23,13 +23,17 @@ public function create(User $user, array $input): Team
 
         Validator::make($input, [
             'name' => ['required', 'string', 'max:255'],
+            'billing_name' => ['required', 'string', 'max:255'],
+            'billing_email' => ['required', 'string', 'max:255', 'unique:teams'],
         ])->validateWithBag('createTeam');
 
         AddingTeam::dispatch($user);
 
         $user->switchTeam($team = $user->ownedTeams()->create([
             'name' => $input['name'],
             'personal_team' => false,
+            'billing_name' => $input['billing_name'],
+            'billing_email' => $input['billing_email'],
         ]));
 
         return $team;

diff --git a/app/Http/Controllers/TeamBillingController.php b/app/Http/Controllers/TeamBillingController.php
@@ -3,7 +3,6 @@
 namespace App\Http\Controllers;
 
 use App\Models\Team;
-use Carbon\Carbon;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
@@ -16,9 +15,8 @@ public function show(Team $team)
     {
         $customer = $team->createAsCustomer();
 
-        //        dd($team->subscription()->nextPayment());
         $checkout = $team->subscribe('pri_01j2ag2ts45hznad1t67bs4syd')->returnTo(route('teams.billing.show', $team));
-        //$team->subscription()->anchorBillingCycleOn(Carbon::now()->addMonth()->startOfMonth());
+
         $nextPayment = $team->subscription()?->nextPayment();
 
         //Cashier::api()
@@ -43,7 +41,7 @@ public function updateCustomer(Team $team, Request $request)
     {
         $formData = $request->validate([
             'name' => 'required',
-            'email' => 'required|email',
+            'email' => ['required', 'email', 'unique:teams,billing_email'],
         ]);
 
         DB::transaction(function () use ($team, $formData) {

diff --git a/app/Models/Team.php b/app/Models/Team.php
@@ -57,6 +57,17 @@ protected function casts(): array
         ];
     }
 
+    protected static function booted(): void
+    {
+        self::deleting(function (Team $team) {
+            $team->nodes()->delete();
+
+            if ($team->subscription()?->active() && ! $team->subscription()->ends_at) {
+                $team->subscription()->cancelNow();
+            }
+        });
+    }
+
     protected function nodes(): HasMany
     {
         return $this->hasMany(Node::class);
@@ -67,6 +78,10 @@ protected function nodes(): HasMany
      */
     protected function paddleName(): string
     {
+        if ($this->billing_name) {
+            return $this->billing_name;
+        }
+
         return $this->owner->name;
     }
 
@@ -75,6 +90,10 @@ protected function paddleName(): string
      */
     protected function paddleEmail(): string
     {
+        if ($this->billing_email) {
+            return $this->billing_email;
+        }
+
         return $this->owner->email;
     }
 

diff --git a/resources/js/Components/FormField.vue b/resources/js/Components/FormField.vue
@@ -1,36 +1,39 @@
 <script setup>
-import {ref, onMounted, reactive, onActivated} from 'vue';
+import { ref, onMounted, reactive, onActivated } from "vue";
 import InputLabel from "@/Components/InputLabel.vue";
 import InputError from "@/Components/InputError.vue";
 
 const props = defineProps({
-  'error': String,
-})
+    error: String,
+});
 
 const slot = ref(null);
 
 const state = reactive({
-  domId: ''
+    domId: "",
 });
 
 onMounted(() => {
-  state.domId = 'f-' + Math.random().toString(36).slice(2);
-
-  slot.value.children[0]?.setAttribute('id', state.domId);
-})
+    state.domId = "f-" + Math.random().toString(36).slice(2);
 
+    slot.value.children[0]?.setAttribute("id", state.domId);
+});
 </script>
 
 <template>
-  <div v-auto-animate>
-    <InputLabel :for="state.domId">
-      <slot name="label" />
-    </InputLabel>
+    <div v-auto-animate>
+        <InputLabel :for="state.domId">
+            <slot name="label" />
+        </InputLabel>
 
-    <div ref="slot">
-      <slot />
-    </div>
+        <div ref="slot">
+            <slot />
+        </div>
+
+        <div v-if="$slots.hint" class="text-sm text-gray-500 pt-2">
+            <slot name="hint" />
+        </div>
 
-    <InputError :message="$props.error" class="mt-2" />
-  </div>
-</template>
+        <InputError :message="$props.error" class="mt-2" />
+    </div>
+</template>
diff --git a/resources/js/Pages/Teams/Billing.vue b/resources/js/Pages/Teams/Billing.vue
@@ -9,6 +9,7 @@ import TextInput from "@/Components/TextInput.vue";
 import { useForm } from "@inertiajs/vue3";
 import ExternalLink from "@/Components/ExternalLink.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
+import SectionBorder from "@/Components/SectionBorder.vue";
 
 const props = defineProps({
     team: Object,
@@ -50,13 +51,16 @@ const updatePaymentMethod = () => {
             </template>
 
             <template #form>
-                <FormField class="col-span-4">
+                <FormField class="col-span-4" :error="customerForm.errors.name">
                     <template #label> Business Name </template>
 
                     <TextInput v-model="customerForm.name" class="w-full" />
                 </FormField>
 
-                <FormField class="col-span-4">
+                <FormField
+                    class="col-span-4"
+                    :error="customerForm.errors.email"
+                >
                     <template #label> Business Email </template>
 
                     <TextInput v-model="customerForm.email" class="w-full" />
@@ -73,6 +77,8 @@ const updatePaymentMethod = () => {
             </template>
         </FormSection>
 
+        <SectionBorder />
+
         <ActionSection>
             <template #title> Next Payment </template>
 
@@ -166,6 +172,8 @@ const updatePaymentMethod = () => {
             </template>
         </ActionSection>
 
+        <SectionBorder />
+
         <ActionSection>
             <template #title> Transactions </template>
 

diff --git a/resources/js/Pages/Teams/Partials/CreateTeamForm.vue b/resources/js/Pages/Teams/Partials/CreateTeamForm.vue
@@ -1,28 +1,58 @@
 <script setup>
-import { useForm } from '@inertiajs/vue3';
-import FormSection from '@/Components/FormSection.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
+import { useForm } from "@inertiajs/vue3";
+import FormSection from "@/Components/FormSection.vue";
+import InputError from "@/Components/InputError.vue";
+import InputLabel from "@/Components/InputLabel.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import TextInput from "@/Components/TextInput.vue";
+import FormField from "@/Components/FormField.vue";
+import ActionSection from "@/Components/ActionSection.vue";
 
 const form = useForm({
-    name: '',
+    name: "",
+    billing_name: "",
+    billing_email: "",
 });
 
 const createTeam = () => {
-    form.post(route('teams.store'), {
-        errorBag: 'createTeam',
+    form.post(route("teams.store"), {
+        errorBag: "createTeam",
         preserveScroll: true,
     });
 };
 </script>
 
 <template>
-    <FormSection @submitted="createTeam">
-        <template #title>
-            Team Details
+    <ActionSection>
+        <template #title> Customer Details </template>
+
+        <template #description>
+            Invoices and receipts will be sent to the specified E-Mail address.
+        </template>
+
+        <template #content>
+            <FormField class="col-span-4" :error="form.errors.billing_name">
+                <template #label> Business Name </template>
+
+                <TextInput v-model="form.billing_name" class="w-full" />
+            </FormField>
+
+            <FormField class="col-span-4" :error="form.errors.billing_email">
+                <template #label> Business Email </template>
+
+                <TextInput v-model="form.billing_email" class="w-full" />
+
+                <template #hint>
+                    E-Mails should be unique. You can use '+' sign to use the
+                    same email for multiple teams. For example,
+                    [email protected]
+                </template>
+            </FormField>
         </template>
+    </ActionSection>
+
+    <FormSection @submitted="createTeam">
+        <template #title> Team Details </template>
 
         <template #description>
             Create a new team to collaborate with others on projects.
@@ -33,10 +63,16 @@ const createTeam = () => {
                 <InputLabel value="Team Owner" />
 
                 <div class="flex items-center mt-2">
-                    <img class="object-cover w-12 h-12 rounded-full" :src="$page.props.auth.user.profile_photo_url" :alt="$page.props.auth.user.name">
+                    <img
+                        class="object-cover w-12 h-12 rounded-full"
+                        :src="$page.props.auth.user.profile_photo_url"
+                        :alt="$page.props.auth.user.name"
+                    />
 
                     <div class="ms-4 leading-tight">
-                        <div class="text-gray-900 dark:text-white">{{ $page.props.auth.user.name }}</div>
+                        <div class="text-gray-900 dark:text-white">
+                            {{ $page.props.auth.user.name }}
+                        </div>
                         <div class="text-sm text-gray-700 dark:text-gray-300">
                             {{ $page.props.auth.user.email }}
                         </div>
@@ -57,8 +93,11 @@ const createTeam = () => {
             </div>
         </template>
 
-        <template #actions>
-            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
+        <template #submit>
+            <PrimaryButton
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            >
                 Create
             </PrimaryButton>
         </template>