284 lines
8.6 KiB
Svelte
284 lines
8.6 KiB
Svelte
<script lang="ts">
|
|
|
|
interface Props {
|
|
log_lvl?: number;
|
|
additional_kv?: key_val;
|
|
e_success?: boolean;
|
|
e_class?: string;
|
|
e_title?: string;
|
|
e_text?: string;
|
|
btn_text?: string;
|
|
btn_title?: string;
|
|
btn_class?: string;
|
|
hide_icon?: boolean;
|
|
}
|
|
|
|
let {
|
|
log_lvl = 0,
|
|
additional_kv = $bindable({}),
|
|
e_success = $bindable(false),
|
|
e_class = '',
|
|
e_title = 'Technical Help',
|
|
e_text = 'Request technical help for this application.',
|
|
btn_text = 'Technical Help',
|
|
btn_title = 'Technical support help',
|
|
btn_class = '',
|
|
hide_icon = false,
|
|
}: Props = $props();
|
|
|
|
// *** Import Svelte specific
|
|
|
|
// *** Import other supporting libraries
|
|
import {
|
|
// ArrowBigRight,
|
|
BadgeQuestionMark,
|
|
// CircleX,
|
|
// Copy,
|
|
// Eye, EyeOff,
|
|
// Key,
|
|
LifeBuoy,
|
|
// LogIn, LogOut, LockKeyhole,
|
|
// Mail, MailCheck,
|
|
// Menu,
|
|
// RefreshCw, RefreshCcw, RefreshCcwDot,
|
|
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
|
// User, UserCheck
|
|
} from '@lucide/svelte';
|
|
|
|
// *** Import Aether specific variables and functions
|
|
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger, type key_val } from '$lib/ae_stores';
|
|
import { User } from 'lucide-svelte';
|
|
import { api } from './api';
|
|
|
|
if (log_lvl) {
|
|
console.log(`Help - technical support component loaded`);
|
|
}
|
|
|
|
let help_tech_text: string = $state('');
|
|
|
|
function preventDefault(fn) {
|
|
return function (event) {
|
|
event.preventDefault();
|
|
fn.call(this, event);
|
|
};
|
|
}
|
|
|
|
|
|
function send_help_tech_email() {
|
|
if (log_lvl) {
|
|
console.log(`*** send_help_tech_email() ***`);
|
|
}
|
|
|
|
let subject = `Technical Notification - ${$ae_loc.name}`;
|
|
|
|
let body_html = `
|
|
<div>
|
|
Technical Notification,\n\n
|
|
<ul>
|
|
<li>Datetime: ${new Date().toISOString()}</li>
|
|
<li>URL: ${window.location.href}</li>
|
|
<li>Browser: ${navigator.userAgent}</li>
|
|
<li>Viewport Size: ${window.innerWidth} x ${window.innerHeight}</li>
|
|
<li>Screen Resolution: ${window.screen.width} x ${window.screen.height}</li>
|
|
<li>In iframe: ${$ae_loc?.iframe}</li>
|
|
<li>Theme Mode: ${$ae_loc?.theme_mode}</li>
|
|
<li>Theme Name: ${$ae_loc?.theme_name}</li>
|
|
<li>Account ID: ${$slct.account_id}</li>
|
|
<li>Access Type: ${$ae_loc?.access_type}</li>
|
|
${$ae_loc?.person_id ? `<li>person_id: ${$ae_loc?.person_id}</li>` : ''}
|
|
${$ae_loc?.user_id ? `<li>user_id: ${$ae_loc?.user_id}</li>` : ''}
|
|
${$ae_loc?.username ? `<li>username: ${$ae_loc?.username}</li>` : ''}
|
|
${$ae_loc?.email ? `<li>email: ${$ae_loc?.email}</li>` : ''}
|
|
<li>API Base URL: ${$ae_api.base_url}</li>
|
|
</ul>
|
|
<p>
|
|
Help Request:\n\n
|
|
${help_tech_text}
|
|
</p>
|
|
|
|
</div>
|
|
`;
|
|
|
|
api.send_email({
|
|
api_cfg: $ae_api,
|
|
from_email: $ae_loc.site_cfg_json?.noreply_email ?? 'noreply+tech@oneskyit.com',
|
|
from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'Tech NoReply',
|
|
// to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
|
|
to_email: 'scott+tech@oneskyit.com',
|
|
// to_email: $idaa_slct.post_obj.email,
|
|
// to_email: 'scott+idaabb@oneskyit.com',
|
|
to_name: $ae_loc.site_cfg_json?.admin_name ?? 'Tech Admin',
|
|
// to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
|
|
subject: subject,
|
|
body_html: body_html,
|
|
});
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<div
|
|
class="
|
|
m-2
|
|
p-2
|
|
flex flex-row
|
|
items-center justify-center
|
|
preset-tonal-surface
|
|
rounded-lg shadow-2xl
|
|
border-2
|
|
border-blue-400 dark:border-blue-600
|
|
shadow-blue-200 dark:shadow-blue-800
|
|
bg-blue-100 dark:bg-blue-900
|
|
transition-all
|
|
{e_class}
|
|
"
|
|
>
|
|
|
|
|
|
{#if $ae_sess.show_help_tech}
|
|
<div
|
|
class="
|
|
flex flex-col gap-1
|
|
items-center justify-center
|
|
transition-all
|
|
"
|
|
>
|
|
{#if e_success}
|
|
<span class="text-green-500">
|
|
<BadgeQuestionMark class="inline-block mr-2" />
|
|
Help Requested
|
|
</span>
|
|
{:else}
|
|
<span class="text-gray-800 font-semibold">
|
|
<BadgeQuestionMark class="inline-block mr-2" />
|
|
<!-- Request Technical Help -->
|
|
Notify Technical Support
|
|
</span>
|
|
<!-- <span class="text-gray-500">
|
|
Send your help request with or without a description.
|
|
</span> -->
|
|
{/if}
|
|
|
|
<form
|
|
class="
|
|
m-1
|
|
flex flex-col gap-1
|
|
items-center justify-center
|
|
w-md max-w-lg
|
|
"
|
|
onsubmit={preventDefault(() => {
|
|
// Do stuff...
|
|
send_help_tech_email();
|
|
|
|
// Hide the request form
|
|
$ae_sess.show_help_tech = false;
|
|
})}
|
|
>
|
|
<textarea
|
|
class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded"
|
|
placeholder="Send with or without a description...."
|
|
bind:value={help_tech_text}
|
|
></textarea>
|
|
<button
|
|
type="submit"
|
|
class="
|
|
btn btn-lg
|
|
m-1
|
|
preset-tonal-success
|
|
preset-outlined-warning-600-400
|
|
transition-all
|
|
{btn_class}
|
|
"
|
|
title={btn_title}
|
|
>
|
|
{#if !hide_icon}
|
|
<!-- <BadgeQuestionMark class="inline-block mr-2" /> -->
|
|
<LifeBuoy class="inline-block m-1" />
|
|
{/if}
|
|
|
|
{#if !help_tech_text}
|
|
Notify Without Description
|
|
{:else}
|
|
Send Notification
|
|
{/if}
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<p class="text-sm text-gray-500 text-center">
|
|
This is intended for technical issues only. Please contact your organization's staff if you have a question about your membership, recorded content, meetings, or posts.
|
|
</p>
|
|
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-gray-800">
|
|
Additional Information Included
|
|
</h2>
|
|
<ul class="list-disc list-inside text-gray-800 text-sm">
|
|
<li>Datetime = {new Date().toISOString()}</li>
|
|
<li>URL: {window.location.href}</li>
|
|
<li>Browser = {navigator.userAgent}</li>
|
|
<li>Viewport Size = {window.innerWidth} x {window.innerHeight}</li>
|
|
<li>Screen Resolution = {window.screen.width} x {window.screen.height}</li>
|
|
<li>In iframe = {$ae_loc?.iframe}</li>
|
|
<li>Theme Mode = {$ae_loc?.theme_mode}</li>
|
|
<li>Theme Name = {$ae_loc?.theme_name}</li>
|
|
<li>Account ID = {$slct.account_id}</li>
|
|
<li>Access Type = {$ae_loc?.access_type}</li>
|
|
{#if $ae_loc?.person_id}
|
|
<li>person_id = {$ae_loc?.person_id}</li>
|
|
<li>full_name = {$ae_loc?.full_name}</li>
|
|
{/if}
|
|
{#if $ae_loc?.user_id}
|
|
<li>user_id = {$ae_loc?.user_id}</li>
|
|
<li>username = {$ae_loc?.username}</li>
|
|
<li>email = {$ae_loc?.email}</li>
|
|
{/if}
|
|
<li>API Base URL: {$ae_api.base_url}</li>
|
|
|
|
{#if additional_kv && Object.keys(additional_kv).length > 0}
|
|
<h2 class="text-lg font-semibold text-gray-800">Additional Component Info:</h2>
|
|
<ul class="list-disc list-inside text-gray-800 text-sm">
|
|
{#each Object.entries(additional_kv) as [key, value]}
|
|
<li>{key} = {value}</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
|
|
</ul>
|
|
<p class="text-gray-600 text-sm mt-2">
|
|
This information will be included in the help request to assist technical support in diagnosing the issue.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{:else}
|
|
|
|
<button
|
|
onclick={() => ($ae_sess.show_help_tech = true)}
|
|
class="
|
|
btn btn-sm
|
|
m-1
|
|
preset-outlined-warning-600-400
|
|
transition-all
|
|
{btn_class}
|
|
"
|
|
title={btn_title}
|
|
>
|
|
{#if !hide_icon}
|
|
<BadgeQuestionMark class="inline-block mr-2" />
|
|
{/if}
|
|
{btn_text}
|
|
</button>
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |