Last minute work for CHOW. Hopefully done soon...

src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte

@@ -200,6 +200,24 @@ async function handle_submit_form(event) {
         event_presenter_do['agree'] = !!event_presenter_di.agree;
     }
 
+
+    // Marketing for social media and email related questions
+    if (typeof event_presenter_di.website_url !== 'undefined') {
+        // This is also stored under social_li_json.
+        event_presenter_do['website_url'] = event_presenter_di.website_url;
+    }
+
+    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,
+            org: event_presenter_di.website_url,
+        };
+    }
+
+
     if (typeof event_presenter_di.comments !== 'undefined') {
         event_presenter_do['comments'] = event_presenter_di.comments;
     }
@@ -724,6 +742,21 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
             </svelte:fragment>
             Headshot
         </Tab>
+        <!-- <Tab
+            bind:group={$store_current_tab}
+            name="tab_social"
+            value={'social'}
+            disabled={!$slct.event_presenter_obj.event_presenter_id_random}
+            regionTab={!$ae_loc.administrator_access || !$slct.event_presenter_obj.event_presenter_id_random ? 'text-slate-400' : ''}
+            >
+            {#if $slct.event_presenter_obj.social_li_json}
+                <span class="fas fa-check text-green-500"></span>
+            {/if}
+            <svelte:fragment slot="lead">
+                <span class="fas fa-share-alt"></span>
+            </svelte:fragment>
+            Social Media
+        </Tab> -->
         <Tab
             bind:group={$store_current_tab}
             name="tab_summary"
@@ -1035,6 +1068,63 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
     </form>
 
 
+    {:else if $store_current_tab === 'social'}
+
+
+    <form
+        class="modal-form {$ae_loc.hub.classes__form}"
+        on:submit|preventDefault={handle_submit_form}
+        >
+
+    <h3 class="h4">Website and Social Media</h3>
+    <fieldset class="speaker__website_url space-y-4">
+        <legend class="legend input_required">Website URL:</legend>
+
+        <label for="website_url" class="label">
+            <!-- Website URL -->
+            <input type="url" id="website_url" name="website_url" class="input text-xs w-96 variant-glass-warning" placeholder="Website URL (https://example.org)" bind:value={$slct.event_presenter_obj.website_url} autocomplete="url" required />
+        </label>
+
+        <p class="text-xs italic variant-glass-tertiary max-w-96">The URLs should begin with "https://" or "http://"</p>
+    </fieldset>
+
+    <!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
+    <fieldset class="speaker__social_media space-y-4">
+        <legend class="legend">Social Media:</legend>
+
+        <label for="social_media_facebook" class="label">
+            <!-- Facebook -->
+            <input type="url" id="social_media_facebook" name="social_media_facebook" class="input text-xs w-96" placeholder="Facebook" value={$slct.event_presenter_obj.social_li_json && $slct.event_presenter_obj.social_li_json.facebook ? $slct.event_presenter_obj.social_li_json.facebook : ''} autocomplete="url" />
+        </label>
+        <label for="social_media_instagram" class="label">
+            <!-- Instagram -->
+            <input type="url" id="social_media_instagram" name="social_media_instagram" class="input text-xs w-96" placeholder="Instagram" value={$slct.event_presenter_obj.social_li_json && $slct.event_presenter_obj.social_li_json.instagram ? $slct.event_presenter_obj.social_li_json.instagram : ''} autocomplete="url" />
+        </label>
+        <label for="social_media_linkedin" class="label">
+            <!-- LinkedIn -->
+            <input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input text-xs w-96" placeholder="LinkedIn" value={$slct.event_presenter_obj.social_li_json && $slct.event_presenter_obj.social_li_json.linkedin ? $slct.event_presenter_obj.social_li_json.linkedin : ''} autocomplete="url" />
+        </label>
+        <label for="social_media_twitter" class="label">
+            <!-- X (Twitter) -->
+            <input type="url" id="social_media_twitter" name="social_media_twitter" class="input text-xs w-96" placeholder="X (Twitter)" value={$slct.event_presenter_obj.social_li_json && $slct.event_presenter_obj.social_li_json.twitter ? $slct.event_presenter_obj.social_li_json.twitter : ''} autocomplete="url" />
+        </label>
+    </fieldset>
+
+    <button
+        type="submit"
+        class="btn variant-glass-primary m-2"
+        disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
+        on:click={() => {
+            console.log('*** Save marketing button clicked ***');
+        }}
+        >
+        <span class="fas fa-check mx-1"></span>
+        Save and continue
+    </button>
+
+    </form>
+
+
     {:else if $store_current_tab === 'summary'}
 
     <section class="summary space-y-4">
@@ -1053,10 +1143,10 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
         </button>
 
         <h2 class="h3">Summary</h2>
-        <div>Name: {$slct.event_presenter_obj.full_name}</div>
+        <div>Name: {$slct.event_presenter_obj.full_name ?? '-- No Name Given --'}</div>
-        <div>Professional title: {$slct.event_presenter_obj.professional_title}</div>
+        <div>Professional title: {$slct.event_presenter_obj.professional_title ?? '-- No Title Given --'}</div>
-        <div>Affiliations: {$slct.event_presenter_obj.affiliations}</div>
+        <div>Affiliations: {$slct.event_presenter_obj.affiliations ?? '-- No Affiliations Given --'}</div>
-        <div>Email: {$slct.event_presenter_obj.email}</div>
+        <div>Email: {$slct.event_presenter_obj.email ?? '-- No Email Given --'}</div>
         <div>Biography:
         <pre class="biography pre_wrap">{$slct.event_presenter_obj.biography ?? '-- Not Entered --'}</pre>
         </div>

src/routes/events_speakers/10_view_modal__event_presenter_obj.svelte

@@ -53,12 +53,19 @@ onMount(() => {
 
 <p>This quick view of a presenter's information is customizable or can be hidden completely.</p>
 
-<div class="event_presenter__content">
+<div class="event_presenter__content space-y-4">
     <div
         class="event_presenter_biography biography"
         >
-        <div class="ae_label event_presenter__biography">Biography:</div>
+        <h2 class="h4">Biography:</h2>
-        <pre class="ae_value event_presenter__biography pre_wrap">{@html $slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography : '-- No Bio Given --'}</pre>
+        <pre class="event_presenter__biography pre_wrap">{@html $slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography : '-- No Bio Given --'}</pre>
+    </div>
+
+    <div
+        class="event_presenter__professional_title"
+        >
+        <span class="ae_label">Professional Title:</span>
+        <span class="ae_value">{@html $slct.event_presenter_obj.professional_title ? $slct.event_presenter_obj.professional_title : '-- No Title Given --'}</span>
     </div>
 
     <div
@@ -72,7 +79,8 @@ onMount(() => {
         class="event_presenter__email"
         >
         <span class="ae_label">Email:</span>
-        <span class="ae_value"><span class="fas fa-envelope"></span> {$slct.event_presenter_obj.email}</span>
+        <span class="ae_value"><span class="fas fa-envelope"></span>
+        <a href="mailto:{$slct.event_presenter_obj.email}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.event_presenter_obj.email}</a></span>
     </div>
 
     <div
@@ -83,20 +91,20 @@ onMount(() => {
         <span class="ae_value"><span class="fas fa-phone"></span> {$slct.event_presenter_obj.phone_mobile} &mdash; {$slct.event_presenter_obj.phone_mobile}</span>
     </div>
 
-    <div>
+    <!-- <div>
         <span class="ae_label">Approved:</span>
         <span class="ae_value">
             {$slct.event_presenter_obj.approve ? 'Yes, marked as approved' : 'Not yet marked as approved'}
         </span>
-    </div>
+    </div> -->
 
 
-    <div class="ae_list event_presenter__guests">
+    <!-- <div class="ae_list event_presenter__guests">
         <h2>More Information</h2>
 
         <div class="ae_warning">More info can go here</div>
 
-    </div>
+    </div> -->
 
 
     <section class="card-footer ae_section ae_meta event_presenter__meta">

src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte

@@ -372,6 +372,7 @@ async function handle_submit_form(event) {
         temp_questions['accommodations_text'] = sponsorship_di.accommodations_text;
     }
 
+
     // Marketing for social media and email related questions
     if (typeof sponsorship_di.website_url !== 'undefined') {
         // This is also stored under social_li_json.

src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte

@@ -11,6 +11,7 @@ import type { Writable } from 'svelte/store';
 import { ae_util } from '$lib/ae_utils';
 import { api } from '$lib/api';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+import type { key_val } from '$lib/ae_stores';
 
 // Stores
 
@@ -23,6 +24,12 @@ export let container_class_li = '';
 
 const modalStore = getModalStore();
 
+let placeholder_li: key_val = {
+    file_logo_primary: '-- No File Uploaded --',
+    file_logo_light: '-- No File Uploaded --',
+    file_logo_dark: '-- No File Uploaded --',
+    file_media_promo_video: '-- No File Uploaded --',
+};
 
 if ($slct.sponsorship_id) {
     console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
@@ -35,6 +42,63 @@ onMount(() => {
     console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
 });
 
+$: if ($slct.sponsorship_obj) {
+    console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
+
+    // Logo related
+    if ($slct.sponsorship_obj.logo_li_json) {
+        if ($slct.sponsorship_obj.logo_li_json.primary && $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random) {
+            placeholder_li.file_logo_primary = ae_util.create_img_element({
+                account_id: $ae_loc.account_id,
+                base_url: $ae_api.base_url,
+                hosted_file_id: $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [logo_primary].${$slct.sponsorship_obj.logo_li_json.primary.extension}`,
+                inc_link: true,
+            })
+
+            // `<img src="${$ae_api.base_url}/hosted_file/${$slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}/download?x_no_account_id_token=${$ae_loc.account_id}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.primary.filename}`;
+        }
+        if ($slct.sponsorship_obj.logo_li_json.light && $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random) {
+            placeholder_li.file_logo_light = ae_util.create_img_element({
+                account_id: $ae_loc.account_id,
+                base_url: $ae_api.base_url,
+                hosted_file_id: $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [logo_light].${$slct.sponsorship_obj.logo_li_json.light.extension}`,
+                inc_link: true,
+            })
+
+            // `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.light.filename}`;
+        }
+        if ($slct.sponsorship_obj.logo_li_json.dark && $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random) {
+            placeholder_li.file_logo_dark = ae_util.create_img_element({
+                account_id: $ae_loc.account_id,
+                base_url: $ae_api.base_url,
+                hosted_file_id: $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [logo_dark].${$slct.sponsorship_obj.logo_li_json.dark.extension}`,
+                inc_link: true,
+            })
+
+            // `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.dark.filename}`;
+        }
+    }
+    // Other media files related
+    if ($slct.sponsorship_obj.media_li_json) {
+        if ($slct.sponsorship_obj.media_li_json.promo_video && $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random) {
+            placeholder_li.file_media_promo_video = ae_util.create_video_element({
+                account_id: $ae_loc.account_id,
+                base_url: $ae_api.base_url,
+                hosted_file_id: $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [promo_video].${$slct.sponsorship_obj.media_li_json.promo_video.extension}`,
+                inc_link: true,
+            })
+
+            // `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${$slct.sponsorship_obj.media_li_json.promo_video.filename}`;
+        }
+    }
+
+
+}
+
 </script>
 
 <!-- @component This is the Sponsorships modal view form. -->
@@ -53,31 +117,38 @@ onMount(() => {
 
 <p>This quick view of a sponsorship's information is customizable or can be hidden completely.</p>
 
-<div class="sponsorship__content">
+<div class="sponsorship__content space-y-4">
     <div class="sponsorship__poc">
-        <span class="ae_label">Point of Contact:</span>
+        <h2 class="h4">Point of Contact</h2>
+        <!-- <span class="ae_label">Point of Contact:</span> -->
         <span class="ae_value">{@html $slct.sponsorship_obj.poc_json.full_name}</span>
-        <span class="ae_label">| Email:</span>
-        <span class="ae_value"><span class="fas fa-envelope"></span> {$slct.sponsorship_obj.poc_json.email}</span>
-        <span class="ae_label">| Mobile:</span>
-        <span class="ae_value"><span class="fas fa-mobile-alt"></span> {$slct.sponsorship_obj.poc_json.phone_mobile ?? '-- Not Given --'}</span>
 
-    <div
+        <span class="ae_label">| Email:</span>
+        <span class="ae_value"><span class="fas fa-envelope"></span>
+        <a href="mailto:{$slct.sponsorship_obj.poc_json.email}?Subject={$slct.sponsorship_obj.full_name}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.poc_json.email}</a></span>
+
+        <span class="ae_label">| Mobile:</span>
+        <span class="ae_value"><span class="fas fa-mobile-alt"></span>
+        <a href="tel:{$slct.sponsorship_obj.poc_json.phone_mobile}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.poc_json.phone_mobile ?? '-- Not Given --'}</span>
+    </div>
+
+    <!-- <div
         class="sponsorship_description description"
         >
         <div class="ae_label sponsorship__description">Description:</div>
         <pre class="ae_value sponsorship__description pre_wrap">{@html $slct.sponsorship_obj.description ? $slct.sponsorship_obj.description : '-- No Description Given --'}</pre>
-    </div>
+    </div> -->
 
     <div
         class:ae_d_none={!$slct.sponsorship_obj.level_num}
         class="sponsorship_level"
         >
-        <span class="ae_label">Level of Sponsorship:</span>
+        <h2 class="h4">Level of Sponsorship</h2>
-        <span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
+        <!-- <span class="ae_label">Level of Sponsorship:</span> -->
+        <span class=""><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_str} ({$slct.sponsorship_obj.level_num})</span>
     </div>
 
-    <div
+    <!-- <div
         class:hidden={!$slct.sponsorship_obj.amount}
         class="sponsorship_amount"
         >
@@ -85,18 +156,111 @@ onMount(() => {
         <span class="ae_value">
         ${$slct.sponsorship_obj.amount/100}
         </span>
-    </div>
+    </div> -->
 
-    <div>
+    <!-- <div>
         <span class="ae_label">Paid:</span>
         $
         <span class="ae_value">
             {$slct.sponsorship_obj.paid ? 'Yes, marked as paid' : 'Not yet marked as paid'}
         </span>
+    </div> -->
+
+    <div
+        class="mailing_address">
+       <h2 class="h4">Mailing Address</h2>
+       <div>
+        {#if $slct.sponsorship_obj.address_li_json.mailing}
+        {#if $slct.sponsorship_obj.address_li_json.mailing.line_1}{$slct.sponsorship_obj.address_li_json.mailing.line_1}<br>{/if}
+        {#if $slct.sponsorship_obj.address_li_json.mailing.line_2}{$slct.sponsorship_obj.address_li_json.mailing.line_2}<br>{/if}
+        {#if $slct.sponsorship_obj.address_li_json.mailing.city}{$slct.sponsorship_obj.address_li_json.mailing.city}{/if}
+        {#if $slct.sponsorship_obj.address_li_json.mailing.state_province}, {$slct.sponsorship_obj.address_li_json.mailing.state_province}{/if}
+        {#if $slct.sponsorship_obj.address_li_json.mailing.postal_code} {$slct.sponsorship_obj.address_li_json.mailing.postal_code}{/if}
+        {#if $slct.sponsorship_obj.address_li_json.mailing.country} {$slct.sponsorship_obj.address_li_json.mailing.country}{/if}
+        <!-- {#if $slct.sponsorship_obj.address_li_json.mailing.other_text}, {$slct.sponsorship_obj.address_li_json.mailing.other_text}{/if} -->
+        {/if}
+        </div>
     </div>
 
+    <div
+        class="accommodations">
+        <h2 class="h4">Accommodations</h2>
+        {#if $slct.sponsorship_obj.questions_li_json && $slct.sponsorship_obj.questions_li_json.accommodations_text}
+        <div class="">
+            {$slct.sponsorship_obj.questions_li_json.accommodations_text}
+        </div>
+        {/if}
+    </div>
+
+    <div
+        class="marketing">
+        <h2 class="h4">Marketing</h2>
+
+        {#if $slct.sponsorship_obj.website_url}
+        <div class="">
+            <span class="fas fa-globe"></span> Organization website: <a href="{$slct.sponsorship_obj.website_url}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.website_url}</a>
+        </div>
+        {/if}
+
+        {#if $slct.sponsorship_obj.social_li_json}
+
+        {#if $slct.sponsorship_obj.social_li_json.facebook}
+        <div class="">
+            <span class="fab fa-facebook"></span> Facebook: <a href="{$slct.sponsorship_obj.social_li_json.facebook}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.facebook}</a>
+        </div>
+        {/if}
+        {#if $slct.sponsorship_obj.social_li_json.instagram}
+        <div class="">
+            <span class="fab fa-instagram"></span> Instagram:<a href="{$slct.sponsorship_obj.social_li_json.instagram}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.instagram}</a>
+        </div>
+        {/if}
+        {#if $slct.sponsorship_obj.social_li_json.linkedin}
+        <div class="">
+            <span class="fab fa-linkedin"></span> LinkedIn: <a href="{$slct.sponsorship_obj.social_li_json.linkedin}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.linkedin}</a>
+        </div>
+        {/if}
+        {#if $slct.sponsorship_obj.social_li_json.twitter}
+        <div class="">
+            <span class="fab fa-twitter"></span> Twitter: <a href="{$slct.sponsorship_obj.social_li_json.twitter}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.twitter}</a>
+        </div>
+        {/if}
+
+        {/if}
+    </div>
+
+    <div
+        class="file_uploads">
+        <h2 class="h4">File Uploads</h2>
+
+        {#if placeholder_li.file_logo_primary}
+        <div class="">
+            <span class="fas fa-image"></span> Logo (Primary): {@html placeholder_li.file_logo_primary}
+        </div>
+        {/if}
+
+        {#if placeholder_li.file_logo_light}
+        <div class="">
+            <span class="fas fa-image"></span> Logo (Light): {@html placeholder_li.file_logo_light}
+        </div>
+        {/if}
+
+        {#if placeholder_li.file_logo_dark}
+        <div class="">
+            <span class="fas fa-image"></span> Logo (Dark): {@html placeholder_li.file_logo_dark}
+        </div>
+        {/if}
+
+        {#if placeholder_li.file_media_promo_video}
+        <div class="">
+            <span class="fas fa-video"></span> Promo Video: {@html placeholder_li.file_media_promo_video}
+        </div>
+        {/if}
+
+    </div>
+
+
     <div class="ae_list sponsorship__guests">
-        <h2>Guest List</h2>
+        <h2 class="h4">Guest List</h2>
 
         {#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
         <ul>
@@ -105,7 +269,8 @@ onMount(() => {
                 class:ae_d_none={!$slct.sponsorship_obj.guest_li_json[index].full_name}
                 >
                 <span class="ae_label">
-                    <span class="fas fa-user"></span> Contact:
+                    <span class="fas fa-user"></span>
+                    <!-- Contact: -->
                 </span>
                 {$slct.sponsorship_obj.guest_li_json[index].full_name}
                 {#if $slct.sponsorship_obj.guest_li_json[index].email}
@@ -128,7 +293,7 @@ onMount(() => {
             {/each}
         </ul>
         {:else}
-            <div class="ae_warning">No guest list found!</div>
+            <div class="ae_warning">No guest have been added</div>
         {/if}
 
     </div>
@@ -161,7 +326,7 @@ onMount(() => {
 
 <footer class="{parent.regionFooter}">
 
-    {#if $ae_loc.trusted_access}
+    {#if $ae_loc.administrator_access}
         <div class="ae_options mx-1">
             <button
                 class="btn variant-glass-warning mx-1"