From d993ca59389391f70b4493d014d3ba6cd8253a88 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 6 Aug 2025 21:40:18 -0400
Subject: [PATCH] Saving work for the day. Need to finish this up for IDAA
 ASAP.

---
 src/lib/e_app_clipboard.svelte        |   2 +-
 src/lib/e_app_help_tech.svelte        | 284 ++++++++++++++++++++++++++
 src/routes/idaa/(idaa)/+layout.svelte |  12 ++
 3 files changed, 297 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/e_app_help_tech.svelte

diff --git a/src/lib/e_app_clipboard.svelte b/src/lib/e_app_clipboard.svelte
index 86506f43..18862e72 100644
--- a/src/lib/e_app_clipboard.svelte
+++ b/src/lib/e_app_clipboard.svelte
@@ -36,7 +36,7 @@ import {
     // RefreshCw, RefreshCcw, RefreshCcwDot,
     // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
     // User, UserCheck
-    } from '@lucide/svelte';
+} from '@lucide/svelte';
 
 if (log_lvl) {
     console.log(`Clipboard component initialized with value:`, value);
diff --git a/src/lib/e_app_help_tech.svelte b/src/lib/e_app_help_tech.svelte
new file mode 100644
index 00000000..8efbd2b7
--- /dev/null
+++ b/src/lib/e_app_help_tech.svelte
@@ -0,0 +1,284 @@
+<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>
\ No newline at end of file
diff --git a/src/routes/idaa/(idaa)/+layout.svelte b/src/routes/idaa/(idaa)/+layout.svelte
index b30b19a4..5ee83520 100644
--- a/src/routes/idaa/(idaa)/+layout.svelte
+++ b/src/routes/idaa/(idaa)/+layout.svelte
@@ -10,6 +10,8 @@ import { browser } from '$app/environment';
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
 
+import Help_tech from '$lib/e_app_help_tech.svelte';
+
 interface Props {
     /** @type {import('./$types').LayoutData} */
     data: any;
@@ -192,6 +194,16 @@ if (browser) {
 
 {#if (browser && ($ae_loc.trusted_access || ($ae_loc.authenticated_access && $idaa_loc.novi_uuid)))}
 
+    <Help_tech
+        e_class="w-xl"
+        btn_class="novi_btn"
+        additional_kv={{
+            'novi_uuid': $idaa_loc.novi_uuid,
+            'novi_email': $idaa_loc.novi_email,
+            'novi_full_name': $idaa_loc.novi_full_name,
+        }}
+        >
+    </Help_tech>
     <!-- <div
         bind:clientHeight={$ae_loc.iframe_height}
         > -->