fix: fix some vue errors (#6685)

app/Domains/Contact/ManageRelationships/Web/Controllers/ContactRelationshipsController.php

@@ -45,7 +45,7 @@ public function store(Request $request, string $vaultId, string $contactId)
 
         // first, let's create a contact if there is no contact selected
         $otherContactId = 0;
-        if ($request->input('choice') != 'contact') {
+        if ($request->input('choice') !== 'contact') {
             $otherContact = (new CreateContact())->execute([
                 'account_id' => Auth::user()->account_id,
                 'author_id' => Auth::id(),
@@ -61,9 +61,7 @@ public function store(Request $request, string $vaultId, string $contactId)
                 'template_id' => null,
             ]);
             $otherContactId = $otherContact->id;
-        }
-
-        if ($request->input('choice') == 'contact') {
+        } else {
             $otherContactId = collect($request->input('other_contact_id'))->pluck('id')->first();
         }
 
@@ -72,8 +70,8 @@ public function store(Request $request, string $vaultId, string $contactId)
             'author_id' => Auth::id(),
             'vault_id' => $vaultId,
             'relationship_type_id' => $request->input('relationship_type_id'),
-            'contact_id' => $request->input('base_contact_id') == $contactId ? $contactId : $otherContactId,
-            'other_contact_id' => $request->input('base_contact_id') == $contactId ? $otherContactId : $contactId,
+            'contact_id' => $request->input('base_contact_id') === $contactId ? $contactId : $otherContactId,
+            'other_contact_id' => $request->input('base_contact_id') === $contactId ? $otherContactId : $contactId,
         ]);
 
         return response()->json([

app/Domains/Settings/ManageCallReasons/Web/ViewHelpers/PersonalizeCallReasonsIndexViewHelper.php

@@ -31,9 +31,7 @@ public static function dtoReasonType(CallReasonType $type): array
         return [
             'id' => $type->id,
             'label' => $type->label,
-            'reasons' => $type->callReasons->map(function ($reason) use ($type) {
-                return self::dtoReason($type, $reason);
-            }),
+            'reasons' => $type->callReasons->map(fn ($reason) => self::dtoReason($type, $reason)),
             'url' => [
                 'store' => route('settings.personalize.call_reasons.store', [
                     'callReasonType' => $type->id,

app/Models/CallReason.php

@@ -42,8 +42,8 @@ public function callReasonType(): BelongsTo
     protected function label(): Attribute
     {
         return Attribute::make(
-            get: function ($value, $attributes) {
-                if (! $value) {
+            get: function (?string $value, array $attributes) {
+                if ($value === null) {
                     return __($attributes['label_translation_key']);
                 }
 

resources/js/Components/DropdownLink.vue

@@ -10,14 +10,14 @@ defineProps({
 <template>
   <div>
     <button
-      v-if="as == 'button'"
+      v-if="as === 'button'"
       type="submit"
       class="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
       <slot />
     </button>
 
     <a
-      v-else-if="as == 'a'"
+      v-else-if="as === 'a'"
       :href="href"
       class="block px-4 py-2 text-sm leading-5 text-gray-700 transition hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 hover:dark:bg-gray-900">
       <slot />

resources/js/Components/Jetstream/Banner.vue

@@ -13,15 +13,15 @@ watch(message, async () => {
 
 <template>
   <div>
-    <div v-if="show && message" :class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }">
+    <div v-if="show && message" :class="{ 'bg-indigo-500': style === 'success', 'bg-red-700': style === 'danger' }">
       <div class="mx-auto max-w-screen-xl px-3 py-2 sm:px-6 lg:px-8">
         <div class="flex flex-wrap items-center justify-between">
           <div class="flex w-0 min-w-0 flex-1 items-center">
             <span
               class="flex rounded-lg p-2"
-              :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
+              :class="{ 'bg-indigo-600': style === 'success', 'bg-red-600': style === 'danger' }">
               <svg
-                v-if="style == 'success'"
+                v-if="style === 'success'"
                 class="h-5 w-5 text-white"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -35,7 +35,7 @@ watch(message, async () => {
               </svg>
 
               <svg
-                v-if="style == 'danger'"
+                v-if="style === 'danger'"
                 class="h-5 w-5 text-white"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -59,8 +59,8 @@ watch(message, async () => {
               type="button"
               class="-me-1 flex rounded-md p-2 transition focus:outline-none sm:-me-2"
               :class="{
-                'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success',
-                'hover:bg-red-600 focus:bg-red-600': style == 'danger',
+                'hover:bg-indigo-600 focus:bg-indigo-600': style === 'success',
+                'hover:bg-red-600 focus:bg-red-600': style === 'danger',
               }"
               :aria-label="$t('Dismiss')"
               @click.prevent="show = false">

resources/js/Components/ResponsiveNavLink.vue

@@ -17,7 +17,7 @@ const classes = computed(() => {
 
 <template>
   <div>
-    <button v-if="as == 'button'" :class="classes" class="w-full text-left">
+    <button v-if="as === 'button'" :class="classes" class="w-full text-left">
       <slot />
     </button>
 

resources/js/Pages/Settings/Notifications/Logs/Index.vue

@@ -105,7 +105,7 @@
 
         <!-- blank state -->
         <div
-          v-if="data.notifications.length == 0"
+          v-if="data.notifications.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('You haven’t received a notification in this channel yet.') }}

resources/js/Pages/Settings/Notifications/Partials/Emails.vue

@@ -137,14 +137,14 @@
 
           <!-- link to send a test email, if not already sent -->
           <li
-            v-if="testEmailSentId != email.id"
+            v-if="testEmailSentId !== email.id"
             class="me-4 inline cursor-pointer text-blue-500 hover:underline"
             @click="sendTest(email)">
             {{ $t('Send test') }}
           </li>
 
           <!-- text saying that the email has been sent -->
-          <li v-if="testEmailSentId == email.id" class="me-4 inline">
+          <li v-if="testEmailSentId === email.id" class="me-4 inline">
             {{ $t('Test email sent!') }}
           </li>
 

resources/js/Pages/Settings/Personalize/AddressTypes/Index.vue

@@ -96,7 +96,7 @@
             class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- detail of the address type -->
             <div
-              v-if="renameAddressTypeModalShownId != addressType.id"
+              v-if="renameAddressTypeModalShownId !== addressType.id"
               class="flex items-center justify-between px-5 py-2">
               <span class="text-base">{{ addressType.name }}</span>
 
@@ -113,14 +113,14 @@
 
             <!-- rename a addressType modal -->
             <form
-              v-if="renameAddressTypeModalShownId == addressType.id"
+              v-if="renameAddressTypeModalShownId === addressType.id"
               class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
               @submit.prevent="update(addressType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + addressType.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -142,7 +142,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localAddressTypes.length == 0"
+          v-if="localAddressTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('Address types let you classify contact addresses.') }}</p>
         </div>
@@ -201,6 +201,7 @@ export default {
     showAddressTypeModal() {
       this.form.name = '';
       this.createAddressTypeModalShown = true;
+      this.renameAddressTypeModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newAddressType.focus();
@@ -210,9 +211,10 @@ export default {
     updateAdressTypeModal(addressType) {
       this.form.name = addressType.name;
       this.renameAddressTypeModalShownId = addressType.id;
+      this.createAddressTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${addressType.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 

resources/js/Pages/Settings/Personalize/CallReasons/Index.vue

@@ -113,7 +113,7 @@
           <li v-for="callReasonType in localCallReasonTypes" :key="callReasonType.id">
             <!-- detail of the call reason type -->
             <div
-              v-if="renameCallReasonTypeModalShownId != callReasonType.id"
+              v-if="renameCallReasonTypeModalShownId !== callReasonType.id"
               class="item-list flex items-center justify-between border-b border-gray-200 px-5 py-2 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <span class="text-base font-semibold">{{ callReasonType.label }}</span>
 
@@ -132,14 +132,14 @@
 
             <!-- rename a call reason type modal -->
             <form
-              v-if="renameCallReasonTypeModalShownId == callReasonType.id"
+              v-if="renameCallReasonTypeModalShownId === callReasonType.id"
               class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
               @submit.prevent="updateCallReasonType(callReasonType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + callReasonType.id"
+                  ref="renameCallReasonType"
                   v-model="form.callReasonTypeName"
                   :label="$t('Name')"
                   :type="'text'"
@@ -165,8 +165,9 @@
               v-for="reason in callReasonType.reasons"
               :key="reason.id"
               class="border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
+              {{ reason }}
               <!-- detail of the relationship type -->
-              <div v-if="renameReasonModalId != reason.id" class="flex items-center justify-between px-5 py-2 ps-6">
+              <div v-if="renameReasonModalId !== reason.id" class="flex items-center justify-between px-5 py-2 ps-6">
                 <span>{{ reason.label }}</span>
 
                 <!-- actions -->
@@ -184,14 +185,14 @@
 
               <!-- rename the reason modal -->
               <form
-                v-if="renameReasonModalId == reason.id"
+                v-else
                 class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
                 @submit.prevent="updateReason(callReasonType, reason)">
                 <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                   <errors :errors="form.errors" />
 
                   <text-input
-                    :ref="'rename' + reason.id"
+                    ref="rename"
                     v-model="form.label"
                     :label="$t('Name')"
                     :type="'text'"
@@ -214,7 +215,7 @@
 
             <!-- create a new reason -->
             <div
-              v-if="createReasonModalId != callReasonType.id"
+              v-if="createReasonModalId !== callReasonType.id"
               class="item-list border-b border-gray-200 px-5 py-2 ps-6 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <span
                 class="cursor-pointer text-sm text-blue-500 hover:underline"
@@ -225,7 +226,7 @@
 
             <!-- create a new resaon -->
             <form
-              v-if="createReasonModalId == callReasonType.id"
+              v-if="createReasonModalId === callReasonType.id"
               class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
               @submit.prevent="storeReason(callReasonType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
@@ -254,7 +255,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localCallReasonTypes.length == 0"
+          v-if="localCallReasonTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{ $t('Call reasons let you indicate the reason of calls you make to your contacts.') }}
@@ -318,6 +319,7 @@ export default {
     showCallReasonTypeModal() {
       this.form.callReasonTypeName = '';
       this.createCallReasonTypeModalShown = true;
+      this.renameCallReasonTypeModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newCallReasonType.focus();
@@ -327,9 +329,10 @@ export default {
     renameCallReasonTypeModal(callReasonType) {
       this.form.callReasonTypeName = callReasonType.label;
       this.renameCallReasonTypeModalShownId = callReasonType.id;
+      this.createCallReasonTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${callReasonType.id}`].focus();
+        this.$refs.renameCallReasonType[0].focus();
       });
     },
 
@@ -338,7 +341,7 @@ export default {
       this.form.label = '';
 
       this.$nextTick(() => {
-        this.$refs.newReason.focus();
+        this.$refs.newReason[0].focus();
       });
     },
 
@@ -347,7 +350,7 @@ export default {
       this.renameReasonModalId = reason.id;
 
       this.$nextTick(() => {
-        this.$refs[`rename${reason.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 

resources/js/Pages/Settings/Personalize/ContactInformationTypes/Index.vue

@@ -114,7 +114,7 @@
             class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
             <!-- detail of the contact information type -->
             <div
-              v-if="renameContactInformationTypeModalShownId != contactInformationType.id"
+              v-if="renameContactInformationTypeModalShownId !== contactInformationType.id"
               class="flex items-center justify-between px-5 py-2">
               <div>
                 <span class="text-base">{{ contactInformationType.name }}</span>
@@ -145,14 +145,14 @@
 
             <!-- rename a contactInformationType modal -->
             <form
-              v-if="renameContactInformationTypeModalShownId == contactInformationType.id"
+              v-if="renameContactInformationTypeModalShownId === contactInformationType.id"
               class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800"
               @submit.prevent="update(contactInformationType)">
               <div class="border-b border-gray-200 p-5 dark:border-gray-700">
                 <errors :errors="form.errors" />
 
                 <text-input
-                  :ref="'rename' + contactInformationType.id"
+                  ref="rename"
                   v-model="form.name"
                   :label="$t('Name')"
                   :type="'text'"
@@ -189,7 +189,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localContactInformationTypes.length == 0"
+          v-if="localContactInformationTypes.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">
             {{
@@ -256,6 +256,7 @@ export default {
       this.form.name = '';
       this.form.protocol = '';
       this.createContactInformationTypeModalShown = true;
+      this.renameContactInformationTypeModalShownId = 0;
 
       this.$nextTick(() => {
         this.$refs.newContactInformationType.focus();
@@ -266,9 +267,10 @@ export default {
       this.form.name = contactInformationType.name;
       this.form.protocol = contactInformationType.protocol;
       this.renameContactInformationTypeModalShownId = contactInformationType.id;
+      this.createContactInformationTypeModalShown = false;
 
       this.$nextTick(() => {
-        this.$refs[`rename${contactInformationType.id}`].focus();
+        this.$refs.rename[0].focus();
       });
     },
 

resources/js/Pages/Settings/Personalize/Currencies/Index.vue

@@ -124,7 +124,7 @@
 
         <!-- blank state -->
         <div
-          v-if="localCurrencies.length == 0"
+          v-if="localCurrencies.length === 0"
           class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
           <p class="p-5 text-center">{{ $t('There is no currencies in this account.') }}</p>
         </div>