100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<template>
|
|
<v-card variant="flat" class="mb-6">
|
|
<v-card-title class="text-h6 d-flex align-center pb-4">
|
|
<v-icon class="mr-2" color="primary">mdi-email</v-icon>
|
|
Email Communication
|
|
</v-card-title>
|
|
<v-card-text class="pt-2">
|
|
<!-- Show credentials setup if not connected -->
|
|
<EmailCredentialsSetup
|
|
v-if="!isConnected"
|
|
@connected="onEmailConnected"
|
|
/>
|
|
|
|
<!-- Show email interface if connected -->
|
|
<template v-else>
|
|
<div class="mb-4">
|
|
<v-chip color="success" variant="tonal" size="small">
|
|
<v-icon start>mdi-check-circle</v-icon>
|
|
Connected as: {{ connectedEmail }}
|
|
</v-chip>
|
|
<v-btn
|
|
variant="text"
|
|
size="small"
|
|
class="ml-2"
|
|
@click="disconnect"
|
|
>
|
|
Disconnect
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Email Composer -->
|
|
<EmailComposer
|
|
:interest="interest"
|
|
@sent="onEmailSent"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<!-- Email Thread View -->
|
|
<EmailThreadView
|
|
ref="threadView"
|
|
:interest="interest"
|
|
/>
|
|
</template>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import type { Interest } from '@/utils/types';
|
|
import EmailCredentialsSetup from './EmailCredentialsSetup.vue';
|
|
import EmailComposer from './EmailComposer.vue';
|
|
import EmailThreadView from './EmailThreadView.vue';
|
|
|
|
interface Props {
|
|
interest: Interest;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const isConnected = ref(false);
|
|
const connectedEmail = ref('');
|
|
const threadView = ref<InstanceType<typeof EmailThreadView>>();
|
|
|
|
const checkConnection = () => {
|
|
// Check if we have a session and connected email
|
|
const sessionId = sessionStorage.getItem('emailSessionId');
|
|
const email = sessionStorage.getItem('connectedEmail');
|
|
|
|
if (sessionId && email) {
|
|
isConnected.value = true;
|
|
connectedEmail.value = email;
|
|
}
|
|
};
|
|
|
|
const onEmailConnected = (email: string) => {
|
|
isConnected.value = true;
|
|
connectedEmail.value = email;
|
|
};
|
|
|
|
const onEmailSent = (messageId: string) => {
|
|
// Reload email threads after sending
|
|
threadView.value?.reloadEmails();
|
|
};
|
|
|
|
const disconnect = () => {
|
|
// Clear session storage
|
|
sessionStorage.removeItem('emailSessionId');
|
|
sessionStorage.removeItem('connectedEmail');
|
|
|
|
// Reset state
|
|
isConnected.value = false;
|
|
connectedEmail.value = '';
|
|
};
|
|
|
|
onMounted(() => {
|
|
checkConnection();
|
|
});
|
|
</script>
|