From addadacc47923d20d1b5c317ec2924af0382e64c Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 29 Feb 2024 14:37:37 -0500
Subject: [PATCH] Getting ready for CHOW 2024 demo call tomorrow

---
 src/lib/ae_stores.ts                          |   7 +
 src/routes/events_speakers/+page.svelte       |  24 +-
 .../10_edit_modal__event_presenter_obj.svelte | 433 ++++++++----------
 .../10_edit_modal__sponsorship_obj.svelte     |  35 +-
 4 files changed, 214 insertions(+), 285 deletions(-)

diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index baef296c..1c116ba8 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -64,12 +64,17 @@ export let ae_app_local_data_struct: key_val = {
         'archives': {},
 
         'events': {
+            'event_id': null,
+
             // Badge Printing
 
             // Lead Retrievals
 
             // Presentation Management
 
+            // Speakers Management
+            'default_session_id': null, // Assign to presenters by default
+
             // other
         },
 
@@ -128,6 +133,8 @@ export let ae_app_session_data_struct: key_val = {
 
             // Presentation Management
 
+            // Speakers Management
+
             // other
         },
         'journals': {},
diff --git a/src/routes/events_speakers/+page.svelte b/src/routes/events_speakers/+page.svelte
index 65bfb632..2c9518b6 100644
--- a/src/routes/events_speakers/+page.svelte
+++ b/src/routes/events_speakers/+page.svelte
@@ -91,17 +91,19 @@ $: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.s
     console.log('Show Modal Edit');
     $slct_trigger = null;
 
-    let location = window.location.href;
-    const url = new URL(location);
-    url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
-    history.pushState({}, '', url);
+    if ($slct.event_presenter_id) {
+        let location = window.location.href;
+        const url = new URL(location);
+        url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
+        history.pushState({}, '', url);
+
+        let message = {'event_presenter_id': $slct.event_presenter_id};
+        window.parent.postMessage(message, "*");
+        // console.log('Message sent to parent (iframe):', message);
+    }
 
     // modalStore.clear();
     modalStore.trigger(modal_edit__event_presenter_obj);
-
-    let message = {'event_presenter_id': $slct.event_presenter_id};
-    window.parent.postMessage(message, "*");
-    // console.log('Message sent to parent (iframe):', message);
 }
 
 $: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.show_view__event_presenter_obj) {
@@ -260,17 +262,17 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
             <button
                 class="btn variant-ghost-primary"
                 on:click={() => {
-                    // $ae_loc.mod.events_speakers.show_edit__event_presenter_obj = true;
+                    // $ae_loc.mod.events.show_edit__event_presenter_obj = true;
                     $slct.event_presenter_id = null;
                     $slct.event_presenter_obj = null;
 
                     // modalStore.trigger(modal_edit__event_presenter_obj);
-                    $ae_loc.mod.events_speakers.show_edit__event_presenter_obj = true;
+                    $ae_loc.mod.events.show_edit__event_presenter_obj = true;
                     $slct_trigger = 'show_edit__event_presenter_obj';
                 }}
                 >
                 <span class="fas fa-edit mx-1"></span>
-                Start/Edit Speaker
+                Start Speaker
             </button>
         </section>
 
diff --git a/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte b/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
index 3a894cf2..784cbf3f 100644
--- a/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
+++ b/src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
@@ -1,30 +1,27 @@
 <script lang="ts">
 import type { SvelteComponent } from 'svelte';
-import { createEventDispatcher, onMount } from 'svelte';
-
-// const dispatch = createEventDispatcher();
+import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
 
 
 // This works and uses local storage:
 // store_current_tab must be prefixed with $ to be reactive.
-import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
+import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 import type { Writable } from 'svelte/store';
-const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
+const store_current_tab: Writable<string> = localStorageStore('ae_events_speakers_current_tab', 'start');
 console.log(`store_current_tab:`, $store_current_tab);
 
-
 // This works, but does not uses local storage:
 // store_current_tab is not reactive and should not be prefixed with $.
 // let store_current_tab: string = 'start';
 // console.log(`store_current_tab:`, store_current_tab);
 
-
 // This does not work:
 // let tab_set = $store_current_tab;
 // let tab_set = store_current_tab;
 
 // Stores
-import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
+// import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 
 // Props
 /** Exposes parent props to this component. */
@@ -50,87 +47,76 @@ onMount(() => {
     }
 });
 
-// We've created a custom submit function to pass the response and close the modal.
-// function onFormSubmit(): void {
-//     if ($modalStore[0].response) $modalStore[0].response(formData);
-//     modalStore.close();
-// }
-
-// Base Classes
-// const cBase = 'card p-4 shadow-xl space-y-4 ae_modal_scrollfix';
-// w-modal-wide
-// const cBase = 'bg-surface-100-800-token w-screen h-screen';
-// const cBase = 'card h-screen';
-// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
-
 const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
 
+let ae_promises: key_val = {}; // Promise<any>;
 
+$ae_loc.mod.events.submit_status = null;
 $ae_loc.mod.events.disable_submit__event_presenter_obj = false;
 let placeholder_li: key_val = {
     file_logo_primary: '-- No File Selected --',
     file_logo_secondary: '-- No File Selected --',
     file_media_promo_video: '-- No File Selected --',
 };
-let ae_promises: key_val = {};
-// let ae_promises.api_create__event_presenter_obj: Promise<any>;
 
 if ($slct.event_presenter_id) {
     console.log(`Presenter ID selected: ${$slct.event_presenter_id}`);
     console.log(`Presenter object selected:`, $slct.event_presenter_obj);
-
-    // $slct_trigger = 'load__event_presenter_obj';
-
-    // $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
-    // console.log('Presenter link:', $ae_loc.mod.events.presenter_link);
 } else {
+    $store_current_tab = 'start';
     $slct.event_presenter_id = null;
     $slct.event_presenter_obj = {
         event_id_random: $ae_loc.mod.events.event_id,
 
-        name: null,
-        description: null,
+        title_names: null, // Usually their prefix name
+        given_name: null,
+        family_name: null,
+        professional_title: null,
+        full_name: null,
+        full_name_override: null, // was called display_name
 
-        poc_person_id: null,
+        email: null,
+        phone_mobile: null,
+        affiliations: null,
 
-        logo_li_json: null,
-        media_li_json: null,
+        biography: null,
+
+        picture_path: null,
+
+        // logo_li_json: null,
+        // media_li_json: null,
 
         social_li_json: null,
 
-        guest_li_json: null,
-
-        level_num: null,
-        level_str: null,
-        amount: null,
-        paid: null,
         enable: null,
     };
 }
 
 
 $: if ($slct.event_presenter_obj) {
-    // Logo related
-    if ($slct.event_presenter_obj.logo_li_json) {
-        if ($slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random) {
-            placeholder_li.file_logo_primary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.primary.filename}`;
-        }
-        if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
-            placeholder_li.file_logo_secondary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.secondary.filename}`;
-        }
-    }
-    // Other media files related
-    if ($slct.event_presenter_obj.media_li_json) {
-        if ($slct.event_presenter_obj.media_li_json.promo_video && $slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random) {
-            placeholder_li.file_media_promo_video = `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.event_presenter_obj.media_li_json.promo_video.filename}`;
-        }
-    }
+    // Create HTML for showing pictures here?
+    // if ($slct.event_presenter_obj.logo_li_json) {
+    //     if ($slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random) {
+    //         placeholder_li.file_logo_primary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.primary.filename}`;
+    //     }
+    //     if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
+    //         placeholder_li.file_logo_secondary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.secondary.filename}`;
+    //     }
+    // }
+
+    // Create HTML for showing other media file types here?
+    // if ($slct.event_presenter_obj.media_li_json) {
+    //     if ($slct.event_presenter_obj.media_li_json.promo_video && $slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random) {
+    //         placeholder_li.file_media_promo_video = `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.event_presenter_obj.media_li_json.promo_video.filename}`;
+    //     }
+    // }
 }
 
 async function handle_submit_form(event) {
     console.log('*** handle_submit_form() ***');
 
     $ae_loc.mod.events.disable_submit__event_presenter_obj = true;
+    $ae_loc.mod.events.submit_status = 'saving';
 
     // Data in
     let form_data = new FormData(event.target);
@@ -143,67 +129,48 @@ async function handle_submit_form(event) {
     let event_presenter_do: key_val = {};
 
     if (!$slct.event_presenter_id) {
-        // event_presenter_do['account_id_random'] = $ae_loc.account_id;
-        event_presenter_do['event_presenter_cfg_id_random'] = $slct.event_presenter_cfg_id;
-        // event_presenter_do['enable'] = true;
+        event_presenter_do['event_id_random'] = $ae_loc.mod.events.event_id;
+        event_presenter_do['event_session_id_random'] = $ae_loc.mod.events.default_session_id;
     }
 
-    if (event_presenter_di.poc_full_name || event_presenter_di.poc_email) {
-        event_presenter_do['poc_json'] = {
-            full_name: event_presenter_di.poc_full_name,
-            email: event_presenter_di.poc_email,
-            phone_mobile: event_presenter_di.poc_phone_mobile,
-        };
+    if (event_presenter_di.given_name) {
+        event_presenter_do['given_name'] = event_presenter_di.given_name;
+    }
+    if (event_presenter_di.family_name) {
+        event_presenter_do['family_name'] = event_presenter_di.family_name;
     }
 
-    if (event_presenter_di.organization_name) {
-        // Using the organization_name field to store the name of the event_presenter.
-        event_presenter_do['name'] = event_presenter_di.organization_name;
-    }
-    // if (event_presenter_di.description) {
-    //     event_presenter_do['description'] = event_presenter_di.description;
+    // if (event_presenter_di.given_name && event_presenter_di.family_name) {
+    //     event_presenter_do['full_name_overide'] = ;
     // }
 
-    if (event_presenter_di.level_num) {
-        event_presenter_do['level_num'] = Number(event_presenter_di.level_num);
-        let level_num = event_presenter_do['level_num'];
-
-        if ($slct.event_presenter_cfg_obj.level_li_json) {
-            let level_str = `${$slct.event_presenter_cfg_obj.level_li_json[level_num].name} - ${$slct.event_presenter_cfg_obj.level_li_json[level_num].amount}`;
-            event_presenter_do['level_str'] = level_str;
-        }
+    if (event_presenter_di.organization_name) {
+        event_presenter_do['affiliations'] = event_presenter_di.organization_name;
     }
 
-    // Loop through possible guest list (up to 20) and add to the guest_li_json array.
-
-    let temp_guest_li = [];
-    for (let i = 0; i < 20; i++) {
-        if (event_presenter_di[`guest_${i}_full_name`] || event_presenter_di[`guest_${i}_given_name`]) {
-            let guest_x_full_name = event_presenter_di[`guest_${i}_given_name`] + ' ' + event_presenter_di[`guest_${i}_family_name`];
-            temp_guest_li.push({
-                given_name: event_presenter_di[`guest_${i}_given_name`],
-                family_name: event_presenter_di[`guest_${i}_family_name`],
-                full_name: guest_x_full_name,
-                email: event_presenter_di[`guest_${i}_email`],
-                phone_mobile: event_presenter_di[`guest_${i}_phone_mobile`],
-                phone_home: event_presenter_di[`guest_${i}_phone_home`],
-                phone_office: event_presenter_di[`guest_${i}_phone_office`],
-                city: event_presenter_di[`guest_${i}_city`],
-                other_text: event_presenter_di[`guest_${i}_other_text`],
-            });
-        }
-    }
-    if (temp_guest_li.length) {
-        event_presenter_do['guest_li_json'] = temp_guest_li;
+    if (event_presenter_di.email) {
+        event_presenter_do['email'] = event_presenter_di.email;
     }
 
-    if (event_presenter_di.social_media_facebook || event_presenter_di.social_media_twitter || event_presenter_di.social_media_instagram || event_presenter_di.social_media_linkedin) {
-        event_presenter_do['social_li_json'] = {
-            facebook: event_presenter_di.social_media_facebook,
-            twitter: event_presenter_di.social_media_twitter,
-            instagram: event_presenter_di.social_media_instagram,
-            linkedin: event_presenter_di.social_media_linkedin,
-        };
+    if (event_presenter_di.biography) {
+        event_presenter_do['biography'] = event_presenter_di.biography;
+    }
+
+    // if (event_presenter_di.social_media_facebook || event_presenter_di.social_media_twitter || event_presenter_di.social_media_instagram || event_presenter_di.social_media_linkedin) {
+    //     event_presenter_do['social_li_json'] = {
+    //         facebook: event_presenter_di.social_media_facebook,
+    //         twitter: event_presenter_di.social_media_twitter,
+    //         instagram: event_presenter_di.social_media_instagram,
+    //         linkedin: event_presenter_di.social_media_linkedin,
+    //     };
+    // }
+
+    // if (event_presenter_di.image_headshot) {
+    //     event_presenter_do['picture_path'] = event_presenter_di.image_headshot;
+    // }
+
+    if (event_presenter_di.comments) {
+        event_presenter_do['comments'] = event_presenter_di.comments;
     }
 
     event_presenter_do['hide'] = !!event_presenter_di.hide;
@@ -498,16 +465,25 @@ async function handle_update__event_presenter({
         >
         <Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
             <svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
+            {#if $slct.event_presenter_obj.event_presenter_id_random}
+                <span class="fas fa-check text-green-500"></span>
+            {/if}
             <span>Start</span>
         </Tab>
-        <Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
-            <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
-            Files
-        </Tab>
         <Tab bind:group={$store_current_tab} name="tab_biograhpy" value={'biograhpy'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
             <svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
+            {#if $slct.event_presenter_obj.biography.length > 50}
+                <span class="fas fa-check text-green-500"></span>
+            {/if}
             Biography
         </Tab>
+        <Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
+            <svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
+            {#if $slct.event_presenter_obj.image_li_json}
+                <span class="fas fa-check text-green-500"></span>
+            {/if}
+            Files
+        </Tab>
         <Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
             <svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
             More
@@ -531,7 +507,7 @@ async function handle_update__event_presenter({
     <fieldset class="mb-8 flex flex-wrap gap-4">
         <legend class="legend">Speaker</legend>
 
-        <label for="full_name">Full name
+        <label for="given_name">Given name
             <div class="input-group grid-cols-[auto_1fr_auto]">
             <div class="input-group-shim">
             {#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
@@ -543,15 +519,41 @@ async function handle_update__event_presenter({
             <input
                 type="text"
                 class="input"
-                id="full_name" name="full_name"
-                placeholder="Full name"
-                value={($slct.event_presenter_obj.full_name ? $slct.event_presenter_obj.full_name : '')}
+                id="given_name" name="given_name"
+                placeholder="Given name"
+                value={($slct.event_presenter_obj.given_name ? $slct.event_presenter_obj.given_name : '')}
                 autocomplete="name"
                 readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
                 required
                 >
             </div>
         </label>
+        <label for="family_name">Family name
+            <div class="input-group grid-cols-[auto_1fr_auto]">
+            <div class="input-group-shim">
+            {#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
+                <span class="fas fa-lock" title="Field is locked"></span>
+            {:else}
+                <span class="fas fa-unlock" title="Field is unlocked"></span>
+            {/if}
+            </div>
+            <input
+                type="text"
+                class="input"
+                id="family_name" name="family_name"
+                placeholder="Family name"
+                value={($slct.event_presenter_obj.family_name ? $slct.event_presenter_obj.family_name : '')}
+                autocomplete="name"
+                readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
+                required
+                >
+            </div>
+        </label>
+
+        <label for="affiliations" class="label">Affiliations/Organization
+            <input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input" />
+        </label>
+
         <label for="email">Email
             <div class="input-group grid-cols-[auto_1fr_auto]">
             <div class="input-group-shim">
@@ -575,7 +577,7 @@ async function handle_update__event_presenter({
             </div>
         </label>
 
-        <label for="phone_mobile">Mobile phone
+        <!-- <label for="phone_mobile">Mobile phone
             <input
                 type="tel"
                 class="input"
@@ -585,43 +587,7 @@ async function handle_update__event_presenter({
                 value={($slct.event_presenter_obj.phone_mobile ? $slct.event_presenter_obj.phone_mobile : '')}
                 autocomplete="tel"
                 >
-        </label>
-
-        <label for="affiliations" class="label">Affiliations/Organization
-            <input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input" />
-        </label>
-
-
-        <!-- Collect the organization mailing address -->
-        <fieldset class="mb-8 flex flex-wrap gap-4">
-            <legend class="legend">Mailing Address</legend>
-
-            <label for="address_line_1" class="label max-w-64">
-                <!-- Line 1 (Street) -->
-                <input type="text" id="address_line_1" name="address_line_1" value={$slct.event_presenter_obj.address_street ?? ''} placeholder="Line 1 (street)" autocomplete="street-address" class="input text-xs" />
-            </label>
-            <label for="address_line_2" class="label max-w-64">
-                <!-- Line 2 (Suite) -->
-                <input type="text" id="address_line_2" name="address_line_2" value={$slct.event_presenter_obj.address_suite ?? ''} placeholder="Line 2 (suite)" autocomplete="address-line2" class="input text-xs" />
-            </label>
-            <label for="address_city" class="label max-w-64">
-                <!-- City -->
-                <input type="text" id="address_city" name="address_city" value={$slct.event_presenter_obj.address_city ?? ''} placeholder="City" autocomplete="address-level2" class="input text-xs" />
-            </label>
-            <label for="address_state" class="label max-w-64">
-                <!-- State/Province -->
-                <input type="text" id="address_state_province" name="address_state_province" value={$slct.event_presenter_obj.address_state_province ?? ''} placeholder="State/Province" autocomplete="address-level1" class="input text-xs" />
-            </label>
-            <label for="address_postal_code" class="label max-w-64">
-                <!-- Postal code/Zip -->
-                <input type="text" id="address_postal_code" name="address_postal_code" value={$slct.event_presenter_obj.address_postal_code ?? ''} placeholder="Postal code/Zip" autocomplete="postal-code" class="input text-xs" />
-            </label>
-            <label for="address_country" class="label max-w-64">
-                <!-- Country -->
-                <input type="text" id="address_country" name="address_country" value={$slct.event_presenter_obj.address_country ?? ''} placeholder="Country" autocomplete="country-name" class="input text-xs" />
-            </label>
-        </fieldset>
-
+        </label> -->
     </fieldset>
 
     <!-- </section> -->
@@ -629,19 +595,19 @@ async function handle_update__event_presenter({
     <fieldset class="mb-8">
         <legend class="legend">Agreements & Accommodations</legend>
 
-        <label for="waiver" class="label">
+        <label for="consent" class="label">
             <input
                 type="checkbox"
                 class="checkbox"
-                id="waiver"
-                name="waiver"
+                id="consent"
+                name="consent"
                 value="1"
-                checked={$slct.event_presenter_obj.waiver}
+                checked={$slct.event_presenter_obj.consent}
                 >
-            Yes, I understand the "Speaker General Waiver".
+            Yes, I grant the Foundation permission to use my biography, photo, and presentation, materials and verbal remarks on the Foundation website and promotional materials. I understand that summarized remarks will be sent to me for review prior to inclusion.
         </label>
 
-        <label for="accommodations" class="label">
+        <!-- <label for="accommodations" class="label">
             <input
                 type="checkbox"
                 class="checkbox"
@@ -651,7 +617,7 @@ async function handle_update__event_presenter({
                 checked={$slct.event_presenter_obj.accommodations}
                 >
             Yes, please have a member of the CHOW team reach out for special accommodations or assistance.
-        </label>
+        </label> -->
     </fieldset>
 
     <button
@@ -660,88 +626,6 @@ async function handle_update__event_presenter({
         disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
         on:click={() => {
             console.log('*** Save start button clicked ***');
-            // if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
-            // handle_submit_form();
-            // handle_submit_form;
-        }}
-        >
-        <span class="fas fa-check mx-1"></span>
-        Save
-    </button>
-
-    </form>
-
-
-    {:else if $store_current_tab === 'files'}
-
-
-    <form
-        class="modal-form {cForm}"
-        on:submit|preventDefault={handle_submit_form_files}
-        >
-
-    <section>
-        <h2>Logos</h2>
-        <p>Add your logo here. This logo will be displayed at the gala.</p>
-        <label for="file_logo_primary">
-            Upload logo (png, webp, jpg, svg)
-            <FileDropzone
-                id="file_logo_primary"
-                name="file_logo_primary"
-                padding="p-1"
-                accept="image/*"
-                on:change={(e) => {
-                    console.log('*** FileDropzone change event ***', e);
-
-                    if (e.target.files.length) {
-                        placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
-                    } else {
-                        placeholder_li.file_logo_primary = 'No files selected.';
-                    }
-                }}
-                >
-                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
-                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
-                <svelte:fragment slot="meta">PNG, WEBP, JPG only image types</svelte:fragment>
-            </FileDropzone>
-            {@html placeholder_li.file_logo_primary}
-        </label>
-
-        <label for="file_logo_secondary">
-            Upload a version of your logo for use with dark backgrounds (png, webp, jpg, svg)
-            <FileDropzone
-                id="file_logo_secondary"
-                name="file_logo_secondary"
-                padding="p-1"
-                accept="image/*"
-                on:change={(e) => {
-                    console.log('*** FileDropzone change event ***', e);
-
-                    if (e.target.files.length) {
-                        placeholder_li.file_logo_secondary = `Ready to upload: ${e.target.files[0].name}`;
-                    } else {
-                        placeholder_li.file_logo_secondary = 'No files selected.';
-                    }
-                }}
-                >
-                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
-                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
-                <svelte:fragment slot="meta">PNG, WEBP, JPG only image types</svelte:fragment>
-            </FileDropzone>
-            {@html placeholder_li.file_logo_secondary}
-        </label>
-
-    </section>
-
-    <button
-        type="submit"
-        class="btn {parent.buttonPositive}"
-        disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
-        on:click={() => {
-            console.log('*** Save button clicked ***');
-            // if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
-            // handle_submit_form();
-            // handle_submit_form;
         }}
         >
         <span class="fas fa-check mx-1"></span>
@@ -760,8 +644,10 @@ async function handle_update__event_presenter({
         on:submit|preventDefault={handle_submit_form}
         >
        <label class="label ae_label event_presenter__biography">Speaker Biography
-            <textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography or overview of this event_presenter."></textarea>
+            <textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" rows="10" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography the speaker"></textarea>
         </label>
+        <p>Biography length: {($slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography.length : 0)} characters</p>
+        <p>1,375 is roughly 250 to 300 words</p>
 
         <div class="flex flex-wrap gap-2 p-1">
         <button
@@ -786,6 +672,61 @@ async function handle_update__event_presenter({
     </section>
 
 
+    {:else if $store_current_tab === 'files'}
+
+
+    <form
+        class="modal-form {cForm}"
+        on:submit|preventDefault={handle_submit_form_files}
+        >
+
+    <section>
+        <h2>Headshot Photo</h2>
+        <p>Add your headshot photo here.</p>
+        <label for="image_headshot">
+            Upload logo (png, webp, jpg, svg)
+            <FileDropzone
+                id="image_headshot"
+                name="image_headshot"
+                padding="p-1"
+                accept="image/*"
+                on:change={(e) => {
+                    console.log('*** FileDropzone change event ***', e);
+
+                    if (e.target.files.length) {
+                        placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
+                    } else {
+                        placeholder_li.file_logo_primary = 'No files selected.';
+                    }
+                }}
+                >
+                <svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
+                <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
+                <svelte:fragment slot="meta">PNG, WEBP, JPG only image types</svelte:fragment>
+            </FileDropzone>
+            {@html placeholder_li.file_logo_primary}
+        </label>
+
+    </section>
+
+    <button
+        type="submit"
+        class="btn {parent.buttonPositive}"
+        disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
+        on:click={() => {
+            console.log('*** Save button clicked ***');
+            // if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
+            // handle_submit_form();
+            // handle_submit_form;
+        }}
+        >
+        <span class="fas fa-check mx-1"></span>
+        Save
+    </button>
+
+    </form>
+
+
     {:else if $store_current_tab === 'options'}
 
 
@@ -794,7 +735,7 @@ async function handle_update__event_presenter({
         on:submit|preventDefault={handle_submit_form}
         >
     <!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
-    {#if $slct.event_presenter_obj.social_li_json}
+    <!-- {#if $slct.event_presenter_obj.social_li_json}
     <fieldset class="event_presenter__social_media">
         <legend class="legend">Social Media</legend>
 
@@ -811,12 +752,12 @@ async function handle_update__event_presenter({
             <input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input" placeholder="LinkedIn" value={$slct.event_presenter_obj.social_li_json.linkedin ?? ''} autocomplete="url" />
         </label>
     </fieldset>
-    {/if}
+    {/if} -->
 
     <fieldset class="event_presenter__more_questions">
-        <legend class="legend">More Questions</legend>
+        <legend class="legend">Questions and Comments</legend>
 
-        <label for="question" class="label">This is another question?
+        <!-- <label for="question" class="label">This is another question?
             <div class="label">
             <input
                 type="text"
@@ -830,7 +771,7 @@ async function handle_update__event_presenter({
                 required
                 >
             </div>
-        </label>
+        </label> -->
 
         <label class="label ae_label event_presenter__comments">Comments
             <textarea name="comments" id="comments" class="textarea ae_value event_presenter__comments tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.comments} placeholder="Any comments or questions about event_presenter."></textarea>
diff --git a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
index 7318dc9b..b797537d 100644
--- a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
@@ -1,31 +1,27 @@
 <script lang="ts">
 import type { SvelteComponent } from 'svelte';
-import { createEventDispatcher, onMount } from 'svelte';
+import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 
-// const dispatch = createEventDispatcher();
-
 
 // This works and uses local storage:
 // store_current_tab must be prefixed with $ to be reactive.
-import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
+import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 import type { Writable } from 'svelte/store';
-const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
+const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
 console.log(`store_current_tab:`, $store_current_tab);
 
-
 // This works, but does not uses local storage:
 // store_current_tab is not reactive and should not be prefixed with $.
 // let store_current_tab: string = 'start';
 // console.log(`store_current_tab:`, store_current_tab);
 
-
 // This does not work:
 // let tab_set = $store_current_tab;
 // let tab_set = store_current_tab;
 
 // Stores
-import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
+// import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
 
 // Props
 /** Exposes parent props to this component. */
@@ -50,6 +46,7 @@ onMount(() => {
         console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
     }
 
+    // I tried adding this to load with the sponsorships +layout.ts. This did not seem to work. Probably an async related issue?
     let ds_code: null|string = 'sponsorships__agree_li';
     let ds_type: null|string = 'json';
 
@@ -78,21 +75,10 @@ onMount(() => {
     });
 });
 
-// We've created a custom submit function to pass the response and close the modal.
-// function onFormSubmit(): void {
-//     if ($modalStore[0].response) $modalStore[0].response(formData);
-//     modalStore.close();
-// }
-
-// Base Classes
-// const cBase = 'card p-4 shadow-xl space-y-4 ae_modal_scrollfix';
-// w-modal-wide
-// const cBase = 'bg-surface-100-800-token w-screen h-screen';
-// const cBase = 'card h-screen';
-// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
-
 const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
 
+let ae_promises: key_val = {}; // Promise<any>;
+
 $ae_loc.mod.sponsorships.submit_status = null;
 $ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
 let placeholder_li: key_val = {
@@ -100,17 +86,10 @@ let placeholder_li: key_val = {
     file_logo_secondary: '-- No File Selected --',
     file_media_promo_video: '-- No File Selected --',
 };
-let ae_promises: key_val = {};
-// let ae_promises.api_create__sponsorship_obj: Promise<any>;
 
 if ($slct.sponsorship_id) {
     console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
     console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
-
-    // $slct_trigger = 'load__sponsorship_obj';
-
-    // $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?ae_id=${$slct.sponsorship_id}`;
-    // console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
 } else {
     $store_current_tab = 'start';
     $slct.sponsorship_id = null;