Merge pull request #204 from UTDallasEPICS/stage

Summer changes
UTDallasEPICS · Aug 8, 2024 · 9c167e5 · 9c167e5
2 parents 97c1a12 + 8f6c810
commit 9c167e5
Show file tree

Hide file tree

Showing 52 changed files with 17,808 additions and 17,113 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.env.example b/.env.example
@@ -6,6 +6,8 @@ NUXT_STRIPE_PUBLIC=pk_test_bG0z4rdRUTA25QUTo0tuXCwX
 NUXT_STRIPE_SECRET='example_stripe_secret'
 NUXT_AWS_S3_BUCKET_NAME=images-dev.carsonsvillage.org
 NUXT_EMAIL_SOURCE_ADDRESS=[email protected]
+NUXT_CONSTANT_CONTACTS_CLIENTID=aa192b81-6347-4d1e-85ea-061bac9dc10e
+NUXT_CONSTANT_CONTACTS_SECRET='example_constant_contacts_secret'
 
 AWS_ACCESS_KEY_ID=AKIAT4QWIMWMZ3KXGZ62
 AWS_SECRET_ACCESS_KEY='example_aws_secret_access_key'

diff --git a/components/CVFooter.vue b/components/CVFooter.vue
@@ -1,11 +1,62 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+type EmailListUser = {
+    email: string;
+    first_name: string;
+    last_name: string;
+}
+
+const data = ref<EmailListUser>({
+    email: '',
+    first_name: '',
+    last_name: ''
+});
+
+const isSubmitted = ref(false);
+//console.log(isSubmitted.value)
+
+const submit = async () => {
+    const response = await $fetch<{ success: boolean }>('/api/email_list', {
+        method: 'POST',
+        body: { ...data.value }
+    }).catch((error) => {
+        console.error('Error submitting data:', error);
+    });
+
+    if (response?.success) {
+        isSubmitted.value = true;
+        console.log('Data submitted successfully.');
+        //console.log("Submit?", isSubmitted.value)
+    } else {
+        console.error('Error submitting data.');
+    }
+}
+
+//console.log("Submitted?", isSubmitted.value)
+
+</script>
 
 <template lang="pug">
 div
     div.relative
         img(src='/footer.png')
-        div.absolute(style="margin-left: auto;margin-right: auto; left: 0;right: 0;")
-            LinkButton.absolute.bottom-4.mx-auto.text-md(class="transition duration-300 bg-orange-999 hover:bg-green-600 left-1/2 -translate-x-1/2 text-white" to='https://carsonsvillage.org/contact-us/') Contact Us
+        img(src='/join_email_list.png' style="position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: auto; z-index: 2;")
+        div.absolute(style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 30%; text-align: center; width: 100%;")
+            div(v-if="!isSubmitted")
+                div(style="display: flex; justify-content: space-between; width: 98%;")
+                    .col-md-8.mx-9(style="flex: 1; margin-right: 10px;")
+                        CVInput(v-model='data.first_name' placeholder="First Name*" required)
+                    .col-md-8.mx-9(style="flex: 1; margin-right: 10px;")
+                        CVInput(v-model='data.last_name' placeholder="Last Name*" required)
+                .col-md-8.mx-9(style="width: 46.1%; margin-top: 10px;")
+                    CVInput(v-model='data.email' placeholder="Email*" required)
+                button.type-button.my-4.bg-orange-999.text-white.px-4.py-2.rounded-full.w-32.grow-0(type="button" @click="submit") Submit
+            div(v-else)
+                div.absolute(style="top: 20%; left: 50%; transform: translate(-50%, -50%); text-align: center;")
+                    div.text-xl.text-black.mt-4 Thank you for signing up!
+
+        LinkButton.absolute.bottom-4.mx-auto.text-md(class="transition duration-300 bg-orange-999 hover:bg-green-600 left-1/2 -translate-x-1/2 text-white" to='https://carsonsvillage.org/contact-us/') Contact Us
     div.bg-black.flex(style="color:gray; font-weight: 700; justify-content:center; align-items: center; height: 100px;")
         label COPYRIGHT {{ (new Date()).toLocaleDateString('en', {year:'numeric'}) }} CARSON'S VILLAGE |&nbsp;
         .col
@@ -14,4 +65,12 @@ div
             NuxtLink(to='https://carsonsvillage.org/carsons-village-non-discriminatory-statement/') CARSON’S VILLAGE NON-DISCRIMINATORY STATEMENT
 </template>
 
-<style scoped></style>
+<style scoped>
+.absolute {
+    position: absolute;
+}
+
+.relative {
+    position: relative;
+}
+</style>
diff --git a/components/CVHeader.vue b/components/CVHeader.vue
@@ -14,6 +14,7 @@ const pages = ref<Page[]>([])
 const searchQuery = ref('');
 const route = useRoute()
 const isNotSearch = computed(() => route.path !== "/Search/")
+const toggle = ref(true);
 console.log(route.path)
 
 const onEnter = async() => {
@@ -26,13 +27,22 @@ const onEnter = async() => {
 
 <template lang="pug">
 ClientOnly
-  .max-w-min.mx-auto.flex.gap-2.mt-7(style="text-align:center")
-    div.max-w-min.mx-auto.flex.gap-2(v-if="isLoggedIn")
-      a.items-center.px-2.py-2.text-base.font-medium.rounded-md.text-gray-999.cursor-pointer(
-      class='hover:text-black border border-gray-999 hover:border-green-999 bg-white'  
+  .max-w-min.mx-auto.pt-3.flex.gap-2.mt-7(style="text-align:center")
+    div.max-w-min.mx-auto.flex.gap-2(v-if="isLoggedIn && toggle")
+      a.w-20.items-center.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
+        class='hover:text-black bg-white'
+        target="blank"  
+        href="https://carsonsvillage.org"
+      )         
+        img.w-20.h-14(src="/CVLogo.png")
+
+      a.items-center.pt-5.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
+      class='hover:text-black bg-white'  
       href="/api/logout"
       ) 
-        p.uppercase.white.w-max LOGOUT
+        p.uppercase.white.w-max.font-bold.text-orange-999 LOGOUT
+      NavLinkButton(:class="{'!text-black border-green-999 bg-white': route.path == '/'}" @click="toggle = !toggle") 
+        p.uppercase.white.w-max.text-blue-999 Main Menu
       NavLinkButton(:to="`/pageList/${cuid}/?fromUsers=0`" v-if="isAdvocateAdmin" :class="{'!text-black border-green-999 bg-white': route.path.includes('/page') || route.path.includes('/Page')}") 
         p.uppercase.white.w-max Pages
       NavLinkButton(:to="`/pageList/${familyCuid}/?fromUsers=0`" v-if="!isAdvocateAdmin" :class="{'!text-black border-green-999 bg-white': route.path.includes('/pageList')}")
@@ -41,39 +51,99 @@ ClientOnly
         p.uppercase.white.w-max New page
       NavLinkButton( v-if="isAdvocateAdmin" to='/Users' :class="{'!text-black border-green-999 bg-white': route.path.includes('/Users')}") 
         p.uppercase.white.w-max Users
+      NavLinkButton( v-if="isAdvocateAdmin" to='/EmailList' :class="{'!text-black border-green-999 bg-white': route.path.includes('/EmailList')}") 
+        p.uppercase.white.w-max Email List
       NavLinkButton( v-if="isAdvocateAdmin" to='/EditUser/0' :class="{'!text-black border-green-999 bg-white': route.path.includes('/EditUser')}") 
         p.uppercase.white.w-max Invite user
       NavLinkButton( v-if="isAdvocateAdmin" to='/EditFamily' :class="{'!text-black border-green-999 bg-white': route.path == '/EditFamily'}") 
         p.uppercase.white.w-max Create Family
       NavLinkButton(to="/" :class="{'!text-black border-green-999 bg-white': route.path == '/'}") 
-        p.uppercase.white.w-max Home
+        p.uppercase.white.w-max Profile
       NavLinkButton(v-if="isAdmin" to='/FamilyTransactionList' :class="{'!text-black border-green-999 bg-white': route.path == '/FamilyTransactionList'}") 
         p.uppercase.white.w-max Donations
       NavLinkButton(v-if="isAdvocateAdmin" to='/FamilyReports' :class="{'!text-black border-green-999 bg-white': route.path == '/FamilyReports'}")
         p.uppercase.white.w-max Family Reports
+
+    div.max-w-min.mx-auto.flex.gap-2(v-else-if="isLoggedIn && !toggle")
+      a.w-20.items-center.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
+        class='hover:text-black bg-white'
+        target="blank"  
+        href="https://carsonsvillage.org"
+      )         
+        img.w-20.h-14(src="/CVLogo.png")
+
+      a.items-center.pt-5.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
+        class='hover:text-black bg-white'  
+        href="/api/logout"
+      ) 
+        p.uppercase.white.w-max.font-bold.text-orange-999 LOGOUT
+      NavLinkButton(:class="{'!text-black border-green-999 bg-white': route.path == '/'}" @click="toggle = !toggle") 
+        p.uppercase.white.w-max.text-blue-999 Dashboard
+      DropdownMenu(:has-submenus="true" :num-submenus="4"
+        :submenus="[{ title: 'Timeline of Important Events', to: 'https://carsonsvillage.org/timeline-of-events/' }, { title: 'Resource Library', to: 'http://carsonsvillage.org/resource-library' }, { title: 'Group Support', to: 'https://carsonsvillage.org/grief-group-support/' }, { title: 'Find Support', to: 'https://carsonsvillage.org/support/' }]" :dropdownMinWidth="200")
+        | RESOURCES
+      NavLinkButton(to='https://carsonsvillage.org/get-involved/' target="_blank")
+        p.uppercase.white.w-max.text-black-999 GET INVOLVED
+      DropdownMenu(:has-submenus="true" :num-submenus="6"
+        :submenus="[{ title: 'Our Story', to: 'https://carsonsvillage.org/about-us/our-family/' }, { title: 'Our Testimonies', to: 'https://carsonsvillage.org/our-testimonials/' }, { title: 'In The News', to: 'https://carsonsvillage.org/about-us/in-the-news/' }, { title: 'Newsletter Archive', to: 'https://carsonsvillage.org/about-us/newsletter-archive/' }, { title: 'Our Team >', submenus: [{ title: 'Advocates', to: 'https://carsonsvillage.org/about-us/advocates/' }, { title: 'Clinical Consultants', to: 'https://carsonsvillage.org/about-us/clinical-consultants/' }, { title: 'Support Team', to: 'https://carsonsvillage.org/about-us/meet-our-team/' }]}, { title: 'Board of Directors', to: 'https://carsonsvillage.org/about-us/board-of-directors/' }]" :dropdownMinWidth="150" :nestedDropdownMinWidth="150")
+        | ABOUT&nbsp;US
+
     div.max-w-min.mx-auto.flex.gap-2(v-else)
-      a.items-center.px-2.py-2.text-base.font-medium.rounded-md.text-gray-999.cursor-pointer(
-      class='hover:!text-black border border-gray-999 hover:border-green-999 bg-white'  
+      a.w-20.items-center.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
+        class='hover:text-black bg-white'
+        target="blank"  
+        href="https://carsonsvillage.org"
+      )         
+        img.w-20.h-14(src="/CVLogo.png")
+
+      a.items-center.pt-5.px-2.py-2.text-sm.font-medium.rounded-md.text-blue-999.cursor-pointer(
+      class='hover:!text-black bg-white'  
       href="/api/login"
       ) 
-        p.uppercase.white.w-max LOGIN
-      NavLinkButton(to='https://carsonsvillage.org/' target="_blank") 
-        p.uppercase.white.w-max HOME
-      NavLinkButton(to='https://carsonsvillage.org/#' target="_blank") 
-        p.uppercase.white.w-max RESOURCES
-      NavLinkButton(to='https://carsonsvillage.org/get-involved/' target="_blank") 
-        p.uppercase.white.w-max GET INVOLVED
-      NavLinkButton(to='https://carsonsvillage.org/' target="_blank") 
-        p.uppercase.white.w-max ABOUT US
+        p.uppercase.white.w-max.font-bold.text-orange-999 LOGIN
+
+      DropdownMenu(:has-submenus="true" :num-submenus="4"
+        :submenus="[{ title: 'Timeline of Important Events', to: 'https://carsonsvillage.org/timeline-of-events/' }, { title: 'Resource Library', to: 'http://carsonsvillage.org/resource-library' }, { title: 'Group Support', to: 'https://carsonsvillage.org/grief-group-support/' }, { title: 'Find Support', to: 'https://carsonsvillage.org/support/' }]" :dropdownMinWidth="200")
+        | RESOURCES
+      NavLinkButton(to='https://carsonsvillage.org/get-involved/' target="_blank")
+        p.pl-2.uppercase.white.w-max.text-black-999 GET INVOLVED
+      DropdownMenu(:has-submenus="true" :num-submenus="6"
+        :submenus="[{ title: 'Our Story', to: 'https://carsonsvillage.org/about-us/our-family/' }, { title: 'Our Testimonies', to: 'https://carsonsvillage.org/our-testimonials/' }, { title: 'In The News', to: 'https://carsonsvillage.org/about-us/in-the-news/' }, { title: 'Newsletter Archive', to: 'https://carsonsvillage.org/about-us/newsletter-archive/' }, { title: 'Our Team >', submenus: [{ title: 'Advocates', to: 'https://carsonsvillage.org/about-us/advocates/' }, { title: 'Clinical Consultants', to: 'https://carsonsvillage.org/about-us/clinical-consultants/' }, { title: 'Support Team', to: 'https://carsonsvillage.org/about-us/meet-our-team/' }]}, { title: 'Board of Directors', to: 'https://carsonsvillage.org/about-us/board-of-directors/' }]" :dropdownMinWidth="150" :nestedDropdownMinWidth="150")
+        | ABOUT&nbsp;US
 
     //&& isLoggedIn")
-    .flex.w-max(v-if="isNotSearch")
+    .flex.w-max.px-2.pt-2(v-if="isNotSearch")
       input(class="border border-gray-300 py-2 px-4 rounded-lg focus:outline-none focus:border-black-500" 
-      type="search" placeholder=" " v-model="searchQuery" v-on:keyup.enter="onEnter")
+      type="search" placeholder=" " v-model="searchQuery" v-on:keyup.enter="onEnter" style="height: 40px")
       NuxtLink.inline(:to="`/Search/?search=${searchQuery}&isPageList=0`")
-        img(src="/CVSearchIcon.png")
+        img(src="/CVSearchIcon.png" style="height: 40px")
     //.flex.w-max(v-else) Todo: add to search page
       p.uppercase.white.w-max Welcome TO Carson's Village
 </template>
 
-<style scoped></style>
+<style scoped>
+.no-border {
+  border: none;
+}
+
+.relative {
+  position: relative;
+}
+
+.button-content::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 100%;
+  background-color: transparent;
+  transition: background-color 0.3s;
+}
+
+.no-border:hover .button-content::before,
+.active .button-content::before {
+  background-color: green;
+}
+</style>
diff --git a/components/CVReply.vue b/components/CVReply.vue
@@ -1,11 +1,12 @@
+
 <template lang="pug">
 // I removed the `for i` stuff because I want to make an individual Reply component here and will have a for loop that displays everything as it is in where the component is being called
 div.reply-box(v-if="r.reply?.length > 0", class="reply-box", style="padding: 1rem; text-align: left; border-bottom: 1px solid black")
-  div.reply-header(style="font-size: 1rem; font-weight: bold; margin-bottom: 2.5rem; margin-left: 1rem") {{ r.name }}
-  div.reply-body(style="font-size: 1rem; color: #666; margin-bottom: 2.5rem;") {{ r.reply }}
+div.reply-header(style="font-size: 1rem; font-weight: bold; margin-bottom: 2.5rem; margin-left: 1rem"  ) {{ r.name }}
+div.reply-body(style="font-size: 1rem; color: #666; margin-bottom: 2.5rem;") {{ r.reply }}
 </template>
 
 <script setup lang="ts">
 import type {Reply} from '@/types.d.ts'
 const props = defineProps<{ r: Reply }>()
-</script>
+</script>
diff --git a/components/CVReplySystem.vue b/components/CVReplySystem.vue
@@ -55,14 +55,15 @@ const submitComment = async () => {
 .comment-system.flex.flex-col.items-center(class="sm:mx-4 sm:w-full sm:py-2")
 
       h2.text-center.mt-4.mb-6.font-bold Leave a Message
-      CVTextArea(name='reply' v-model="replyData.reply" placeholder='Replies' class="font-normal h-40 w-full")
-      .field-row.flex.mt-4.w-full
-          CVInput(name='name' v-model="replyData.name" placeholder='Name' class="font-normal w-full")     
+      .flex.justify-center(class="w-2/3")
+        CVTextArea(name='reply' v-model="replyData.reply" placeholder='Replies' class="font-normal h-40 w-full")
+      .field-row.flex.justify-center.mt-4(class="w-2/3")
+          CVInput(name='name' v-model="replyData.name" placeholder='Name' class="font-normal w-2/3" )     
       .col-md-8.ml-4.pt-6.pr-5.flex.items-center.justify-center.mt-6
           ActionButton.mx-auto.text-md(@click="submitComment" class="transition duration-300 bg-orange-999 hover:bg-green-600") Submit
       .div(v-if="successMessage" class="mt-4 text-green-500") {{ successMessage }}
 
 </template>
 
 <style scoped></style>
-
+
diff --git a/components/DonationEntry.vue b/components/DonationEntry.vue
@@ -22,6 +22,7 @@ const props = defineProps({
 
 const feeRecovery = ref(false)
 const anonymous = ref(false)
+const subscribing = ref(true)
 
 const donationData = ref<PageDonation>({
     amount: 5,
@@ -32,6 +33,7 @@ const donationData = ref<PageDonation>({
     transaction_id: "",
     donorFirstName: "",
     donorLastName: "",
+    donorEmail: "",
     comments: "",
     donationDate: null,
     Page: ref<Page[]>([]).value[0],
@@ -41,7 +43,7 @@ const donationData = ref<PageDonation>({
 
 const stripeLink_ref = ref("")
 const create_checkout_session = async () => {
-    console.log(feeRecovery.value)
+    //console.log(feeRecovery.value)
     if(feeRecovery.value) {
       donationData.value.amount = donationData.value.amount * 100 // converting to cents for better accuracy 
       donationData.value.amount = 1.029 * donationData.value.amount + 0.30
@@ -51,7 +53,7 @@ const create_checkout_session = async () => {
         donationData.value.donorFirstName = "anonymous"
         donationData.value.donorLastName = ""
     }
-    console.log(anonymous.value)
+    //console.log(anonymous.value)
     // todo: depreciate
     const donorData = {
         first_name: donationData.value.donorFirstName,
@@ -62,26 +64,31 @@ const create_checkout_session = async () => {
     const sessionInfo = await $fetch('/api/create_session', {
 
         method: 'POST',
-        body: { ...donationData, cuid: props.pageCuid, family_cuid: props.familyCuid, amount_raised: Math.trunc(parseFloat(donationData.value.amount as unknown as string) * 100) as number}
+        body: { ...donationData, cuid: props.pageCuid, family_cuid: props.familyCuid, amount_raised: Math.trunc(parseFloat(donationData.value.amount as unknown as string) * 100) as number, subscribed: subscribing.value}
     });
+
     stripeLink_ref.value = sessionInfo as string
     await navigateTo(stripeLink_ref.value as string,  { external: true } )
 };
 
-
 </script>
 
 <template lang="pug">
 .col-md-8.ml-4.pt-1.pr-5(class="sm:mx-4 sm:w-full sm:py-2")
     CVInput(name='first_name' type='text' v-model="donationData.donorFirstName" placeholder='First Name' required)
 .col-md-8.ml-4.pt-1.pr-5(class="sm:mx-4 sm:w-full sm:py-2")
     CVInput(name='last_name' type='text' v-model="donationData.donorLastName" placeholder='Last Name' required)
+.col-md-8.ml-4.pt-1.pr-5(class="sm:mx-4 sm:w-full sm:py-2")
+    CVInput(name='email' type='text' v-model="donationData.donorEmail" placeholder='Email' required)
+.col-md-8.ml-4.pt-4.pr-5.flex
+    input#subscribing(type='checkbox' class="sm:ml-1" name='subscribing' v-model="subscribing")
+    label.mt-4.ml-4.text-md(for='subscribing' class="sm:mt-0" style="letter-spacing: 0.35px;")  Subscribe to our email list
 .col-md-8.ml-4.pt-4.pr-5.flex
     input#anonymous(type='checkbox' class="sm:ml-1" name='anonymous' v-model="anonymous")
     label.mt-4.ml-4.text-md(for='anonymous' class="sm:mt-0" style="letter-spacing: 0.35px;")  Make this an anonymous donation
 .col-md-8.ml-4.pt-4.pr-5.flex(class="sm:mx-4 sm:w-full sm:py-2")
     textarea#comments.rounded-md.outline-0.border-box.w-full.p-2(style="border: 1px solid #c4c4c4;" name='comments' rows='3' v-model="donationData.comments" placeholder='Comments' required)
-.col-md-8.ml-4.pt-4.pr-5.grid.grid-cols-3(class="sm:mx-4 sm:w-full sm:py-2")
+.col-md-8.ml-4.pt-4.pr-5.grid.grid-cols-3(style="grid-template-columns: repeat(3, minmax(0, 1fr));" class="sm:mx-4 sm:w-full sm:py-2")
     span.rounded-l-md.p-3.col-span-2(style="text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25); border: 1px solid #c4c4c4;") Donation Amount
     .flex
         span.bg-gray-light.py-2.px-1.text-lg(style="text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25); border: 1px solid #c4c4c4; border-right:none;") $
@@ -91,7 +98,7 @@ img(v-if="donationData.amount < 5" src="/tooLowDonations.png" style="height:115p
 input(type='checkbox' class="sm:ml-1" v-model='feeRecovery')
 label.mt-4.ml-4.text-md(for='anonymous' class="sm:mt-0" style="letter-spacing: 0.35px;") I'd like to help cover the transaction fees of ${{ props.isActive ? (0.029 * donationData.amount + 0.30).toFixed(2) : 0}} for my donation. 
 .col-md-8.ml-4.pt-6.pr-5.flex.items-center.justify-center
-    ActionButton.mx-auto.text-md(name='submit' @click="create_checkout_session" class="transition duration-300 bg-orange-999 hover:bg-green-600" :disabled="donationData.amount < 5") DONATE NOW
+    ActionButton.mx-auto.text-md(name='submit' @click="create_checkout_session" :disabled="donationData.amount < 5" :class="{'transition duration-300 bg-orange-999 hover:bg-green-600': true, 'cursor-not-allowed': donationData.amount < 5 }") DONATE NOW
 </template>
 
 <style scoped></style>