refactor: replace woot-button with NextButton in various components for consistency (#22)

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -63,6 +63,7 @@ export default {
   <label class="input-container">
     <span v-if="label">{{ label }}</span>
     <input
+      class="!mb-0"
       :value="modelValue"
       :type="type"
       :placeholder="placeholder"

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -138,9 +138,9 @@ export default {
           />
         </div>
         <div v-if="isWhatsAppBaileysInbox" class="w-[50%] max-w-[50%] ml-[25%]">
-          <woot-button @click="onOpenBaileysLinkDeviceModal">
+          <NextButton @click="onOpenBaileysLinkDeviceModal">
             {{ $t('INBOX_MGMT.ADD.WHATSAPP.BAILEYS.LINK_BUTTON') }}
-          </woot-button>
+          </NextButton>
         </div>
         <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BaileysWhatsapp.vue

@@ -7,7 +7,12 @@ import router from '../../../../index';
 import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
 import { isValidURL } from '../../../../../helper/URLHelper';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 export default {
+  components: {
+    NextButton,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -117,14 +122,9 @@ export default {
       v-if="!showAdvancedOptions"
       class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%] mb-4"
     >
-      <woot-button
+      <NextButton icon="i-lucide-plus" sm link @click="setShowAdvancedOptions">
-        icon="add"
-        size="small"
-        variant="link"
-        @click="setShowAdvancedOptions"
-      >
         {{ $t('INBOX_MGMT.ADD.WHATSAPP.ADVANCED_OPTIONS') }}
-      </woot-button>
+      </NextButton>
     </div>
     <template v-else>
       <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
@@ -162,9 +162,12 @@ export default {
     </template>
 
     <div class="w-full">
-      <woot-submit-button
+      <NextButton
-        :loading="uiFlags.isCreating"
+        :is-loading="uiFlags.isCreating"
-        :button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
+        type="submit"
+        solid
+        blue
+        :label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
       />
     </div>
   </form>

app/javascript/dashboard/routes/dashboard/settings/inbox/components/WhatsappBaileysLinkDeviceModal.vue

@@ -4,6 +4,7 @@ import { useStore } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   show: { type: Boolean, required: true },
@@ -83,17 +84,13 @@ watchEffect(() => {
             <p v-if="error" class="text-red-500 text-center">
               {{ error }}
             </p>
-            <woot-button
+            <Button :is-loading="loading" @click="setup">
-              class="button clear w-fit"
-              :is-loading="loading"
-              @click="setup"
-            >
               {{
                 $t(
                   'INBOX_MGMT.ADD.WHATSAPP.BAILEYS.LINK_DEVICE_MODAL.LINK_DEVICE'
                 )
               }}
-            </woot-button>
+            </Button>
           </template>
 
           <template v-else-if="connection === 'connecting'">
@@ -134,27 +131,26 @@ watchEffect(() => {
                 )
               }}
             </p>
-            <div class="flex gap-4">
+            <div class="flex gap-2">
-              <woot-button
+              <Button ghost :is-loading="loading" @click="disconnect">
-                class="button clear w-fit"
-                :is-loading="loading"
-                @click="disconnect"
-              >
                 {{
                   $t(
                     'INBOX_MGMT.ADD.WHATSAPP.BAILEYS.LINK_DEVICE_MODAL.DISCONNECT'
                   )
                 }}
-              </woot-button>
+              </Button>
               <router-link
                 v-if="isSetup"
-                class="rounded button success"
                 :to="{
                   name: 'inbox_dashboard',
                   params: { inboxId: inbox.id },
                 }"
               >
-                {{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
+                <Button
+                  solid
+                  teal
+                  :label="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
+                />
               </router-link>
             </div>
           </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -301,13 +301,13 @@ export default {
             with-phone-number
             with-provider-connection-status
           />
-          <woot-button class="w-fit" @click="onOpenBaileysLinkDeviceModal">
+          <NextButton class="w-fit" @click="onOpenBaileysLinkDeviceModal">
             {{
               $t(
                 'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_MANAGE_PROVIDER_CONNECTION_BUTTON'
               )
             }}
-          </woot-button>
+          </NextButton>
         </div>
       </SettingsSection>
       <SettingsSection
@@ -322,13 +322,13 @@ export default {
           <woot-input
             v-model="whatsAppProviderUrl"
             type="text"
-            class="flex-1 mr-2"
+            class="flex-1 mr-2 items-center"
             :placeholder="
               $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_PLACEHOLDER')
             "
             @keydown="v$.whatsAppProviderUrl.$touch"
           />
-          <woot-button
+          <NextButton
             :disabled="
               v$.whatsAppProviderUrl.$invalid ||
               whatsAppProviderUrl === inbox.provider_config.provider_url
@@ -336,7 +336,7 @@ export default {
             @click="updateWhatsAppProviderUrl"
           >
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
-          </woot-button>
+          </NextButton>
         </div>
         <span v-if="v$.whatsAppProviderUrl.$error" class="text-red-400">
           {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_PROVIDER_URL_ERROR') }}
@@ -371,15 +371,16 @@ export default {
               )
             "
           />
-          <woot-button
+          <NextButton
             :disabled="
               v$.whatsAppInboxAPIKey.$invalid ||
+              (!inbox.provider_config.api_key && !whatsAppInboxAPIKey) ||
               whatsAppInboxAPIKey === inbox.provider_config.api_key
             "
             @click="updateWhatsAppInboxAPIKey"
           >
             {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
-          </woot-button>
+          </NextButton>
         </div>
       </SettingsSection>
     </div>