refactor: replace woot-button with NextButton in various components for consistency (#22)
This commit is contained in:
Gabriel Jablonski
GitHub
parent
659c3e7c2f
commit
22c8ea8265
@ -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"
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
icon="add"
|
||||
size="small"
|
||||
variant="link"
|
||||
@click="setShowAdvancedOptions"
|
||||
>
|
||||
<NextButton icon="i-lucide-plus" sm 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
|
||||
:loading="uiFlags.isCreating"
|
||||
:button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
|
||||
<NextButton
|
||||
:is-loading="uiFlags.isCreating"
|
||||
type="submit"
|
||||
solid
|
||||
blue
|
||||
:label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -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
|
||||
class="button clear w-fit"
|
||||
:is-loading="loading"
|
||||
@click="setup"
|
||||
>
|
||||
<Button :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">
|
||||
<woot-button
|
||||
class="button clear w-fit"
|
||||
:is-loading="loading"
|
||||
@click="disconnect"
|
||||
>
|
||||
<div class="flex gap-2">
|
||||
<Button ghost :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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user