Updating Comment Moderation Branch

.github/workflows/stage.yml

@@ -32,6 +32,7 @@ jobs:
           script: |
             cd carsons-village-stage
             git checkout stage
+            git stash
             git pull
             npm install
             cp .env ./.output/server/.env

components/CVDatepicker.vue

@@ -1,20 +1,23 @@
 <template lang="pug">
-Datepicker.rounded-md.p-2(type="String" v-model="value")
+Datepicker.rounded-md.p-2(type="Date" v-model="value")
     slot
 </template>
 
 <script setup lang="ts">
 import Datepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-const props = defineProps<{modelValue: string }>();
+const props = defineProps<{modelValue: Date | string | null}>();
 
 const emit = defineEmits(["update:modelValue"])
 const value = computed({
     get(){
+        /*if(props.modelValue == "null") {
+            return null
+        }*/
         return props.modelValue
     },
-    set(v: string){
+    set(v: Date | string | null) {
         emit("update:modelValue", v)
     },
 })

components/CVFooter.vue

@@ -7,7 +7,7 @@ div
         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
     div.bg-black.flex(style="color:gray; font-weight: 700; justify-content:center; align-items: center; height: 100px;")
-        label COPYRIGHT 2023 CARSON'S VILLAGE | 
+        label COPYRIGHT {{ (new Date()).toLocaleDateString('en', {year:'numeric'}) }} CARSON'S VILLAGE | 
         .col
             NuxtLink(to='https://carsonsvillage.org/privacy-policy/') PRIVACY POLICY | 
         .col

components/CVReplySystem.vue

@@ -36,18 +36,19 @@ const submitComment = async () => {
         replyData,
       },
     });
-
+    //console.log(response != false)
     if (response) {
-        //replyData.value.pageCuid = props.pageCuid;
-        //replyData.value.familyCuid = props.familyCuid;
-        emit('displayReply', {...replyData.value});
-        // replyData.value.name = ""; // Clear name field
-        // replyData.value.reply = ""; // Clear reply field
+        console.log("here")
+        replyData.value.pageCuid = props.pageCuid;
+        replyData.value.familyCuid = props.familyCuid;
+        emit('displayReply', {...replyData.value });
+        //replyData.value.name = ""; // Clear name field
+        //replyData.value.reply = ""; // Clear reply field
         // need to find a way to clear fields after submitting a response without messing up the emitted data
 
         //successMessage.value = "Comment submitted successfully!"; // Set success message
-
-        setTimeout(clearSuccessMessage, 1500);
+        //clearSuccessMessage()
+        setTimeout(clearSuccessMessage, 800);
     }
 
 };

components/DonationEntry.vue

@@ -13,11 +13,18 @@ const props = defineProps({
     familyCuid: {
         type: String,
         default: ""
+    },
+    isActive: {
+        type: Boolean,
+        default: false
     }
 })
 
+const feeRecovery = ref(false)
+const anonymous = ref(false)
+
 const donationData = ref<PageDonation>({
-    amount: 0,
+    amount: 5,
     success: false,
     cuid: "",
     pageCuid: props.pageCuid,
@@ -26,13 +33,25 @@ const donationData = ref<PageDonation>({
     donorFirstName: "",
     donorLastName: "",
     comments: "",
+    donationDate: null,
     Page: ref<Page[]>([]).value[0],
     userCuid: '',
     isAnonymous: false
 });
 
 const stripeLink_ref = ref("")
 const create_checkout_session = async () => {
+    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
+      donationData.value.amount = donationData.value.amount / 100 
+    } 
+    if(anonymous.value) {
+        donationData.value.donorFirstName = "anonymous"
+        donationData.value.donorLastName = ""
+    }
+    console.log(anonymous.value)
     // todo: depreciate
     const donorData = {
         first_name: donationData.value.donorFirstName,
@@ -58,7 +77,7 @@ const create_checkout_session = async () => {
 .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-4.pr-5.flex
-    input#anonymous(type='checkbox' class="sm:ml-1" name='anonymous' value='Bike')
+    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)
@@ -67,8 +86,12 @@ const create_checkout_session = async () => {
     .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;") $
         input#donation_amount.bg-gray-light.outline-0.rounded-r-md.border-box.w-full.p-2(style="border: 1px solid #c4c4c4; border-left:none;" name='donation_amount' type="number" min="0.00" step="0.01" v-model="donationData.amount" required)
+        br
+img(v-if="donationData.amount < 5" src="/tooLowDonations.png" style="height:115px; width:600px")
+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") DONATE NOW
+    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
 </template>
 
 <style scoped></style>

components/DonationManagementInformation.vue

@@ -0,0 +1,54 @@
+<template lang="pug">
+.flex.gap-5.justify-around
+    div
+      p.text-center.mt-10 Family 
+      .flex.flex-col.w-full.justify-center.gap-5.mt-5
+        .border.border-grey-500.p-5
+          p.self-center.text-center Total Donations 
+          p.text-center.mt-2 {{ donationFormat(props.totalPageDonations) }}
+        .border.border-grey-500.p-5
+          p.self-center.text-center All Funds Distributed
+          p.text-center.mt-2 {{ donationFormat(props.totalDistributed) }}
+        .border.border-grey-500.p-5
+          p.self-center.text-center Remaining Amount to Distribute
+          p.text-center.mt-2 {{ donationFormat(props.totalRemaining) }} 
+    div
+      p.text-center.mt-10 Page 
+      .flex.flex-col.w-full.justify-center.gap-5.mt-5
+        .border.border-grey-500.p-5
+          p.self-center.text-center All Page Donations
+          p.text-center.mt-2 {{ donationFormat(props.amount_raised) }}
+        .border.border-grey-500.p-5
+          p.self-center.text-center All Page Funds Distributed
+          p.text-center.mt-2 {{ donationFormat(props.amount_distributed) }}
+        .border.border-grey-500.p-5
+          p.self-center.text-center Remaining Amount to Distribute
+          p.text-center.mt-2 {{ donationFormat(props.amount_raised - props.amount_distributed) }}
+    div
+      p.text-center.mt-10 Page Additonal
+      .flex.flex-col.w-full.justify-center.gap-5.mt-5
+        .border.border-grey-500.p-5
+          p.self-center.text-center Donation Status
+          p.text-center.mt-2 {{ props.donationStatus }}
+        .border.border-grey-500.p-5
+          p.self-center.text-center Start Date
+          p.text-center.mt-2 {{ dateFormat(props.startDate) }}
+        .border.border-grey-500.p-5
+          p.self-center.text-center Last Donation Date
+          p.text-center.mt-2 {{ props.lastDonationDate ? dateFormat(props.lastDonationDate) : "No Donations" }}
+</template>
+
+<script setup lang="ts">
+import { donationFormat, dateFormat } from "@/utils"
+const props = defineProps<{
+  totalPageDonations: number,
+  totalDistributed: number,
+  totalRemaining: number,
+  amount_raised: number,
+  amount_distributed: number,
+  donationStatus: string,
+  startDate: Date | string | null,
+  lastDonationDate: Date | string | null
+}>()
+
+</script>

components/StandardTable.vue

@@ -43,7 +43,7 @@ const headers = [
   }, 
   {
     name: "current date",
-    property: new Date().toString(),
+    property: new Date().toISOString(),
     kind: "date"
   }
 ]