feat: Adds the ability to change WhatsApp API key (#6348)

This PR adds the ability to change the WhatsApp API key through the settings under the configuration section

Fixes: #6199

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Sojan <sojan@pepalo.com>
This commit is contained in:
Sivin Varghese
2023-02-08 19:57:59 +05:30
committed by GitHub
parent aab6b10b67
commit 0a7a5abec1
2 changed files with 71 additions and 1 deletions

View File

@@ -472,7 +472,11 @@
"ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
"ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
"WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
"WHATSAPP_SECTION_TITLE": "API Key"
"WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the updated key to be used for the integration with the WhatsApp APIs.",
"WHATSAPP_SECTION_TITLE": "API Key",
"WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
"WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
"WHATSAPP_SECTION_UPDATE_BUTTON": "Update"
},
"AUTO_ASSIGNMENT": {
"MAX_ASSIGNMENT_LIMIT": "Auto assignment limit",

View File

@@ -103,6 +103,31 @@
>
<woot-code :script="inbox.provider_config.api_key" />
</settings-section>
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
:sub-title="
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
"
>
<div class="whatsapp-settings--content">
<woot-input
v-model.trim="whatsAppInboxAPIKey"
type="text"
class="input"
:placeholder="
$t(
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
)
"
/>
<woot-button
:disabled="$v.whatsAppInboxAPIKey.$invalid"
@click="updateWhatsAppInboxAPIKey"
>
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
</woot-button>
</div>
</settings-section>
</div>
</div>
</template>
@@ -114,6 +139,7 @@ import SettingsSection from '../../../../../components/SettingsSection';
import ImapSettings from '../ImapSettings';
import SmtpSettings from '../SmtpSettings';
import MicrosoftReauthorize from '../channels/microsoft/Reauthorize';
import { required } from 'vuelidate/lib/validators';
export default {
components: {
@@ -132,8 +158,12 @@ export default {
data() {
return {
hmacMandatory: false,
whatsAppInboxAPIKey: '',
};
},
validations: {
whatsAppInboxAPIKey: { required },
},
watch: {
inbox() {
this.setDefaults();
@@ -161,9 +191,45 @@ export default {
await this.$store.dispatch('inboxes/updateInbox', payload);
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
}
},
async updateWhatsAppInboxAPIKey() {
try {
const payload = {
id: this.inbox.id,
formData: false,
channel: {},
};
payload.channel.provider_config = {
...this.inbox.provider_config,
api_key: this.whatsAppInboxAPIKey,
};
await this.$store.dispatch('inboxes/updateInbox', payload);
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
}
},
},
};
</script>
<style lang="scss" scoped>
.whatsapp-settings--content {
align-items: center;
display: flex;
flex: 1;
justify-content: space-between;
margin-top: var(--space-small);
.input {
flex: 1;
margin-right: var(--space-small);
::v-deep input {
margin-bottom: 0;
}
}
}
</style>