Gtm testing

components/addMedModal.vue

@@ -1,16 +1,6 @@
 <script setup lang="ts">
-import { gql } from "graphql-tag";
-
-const query = gql`
-  query getMeds {
-    meds {
-      genericFor
-    }
-  }
-`;
-
-const emit = defineEmits('submit')
 
+const emit = defineEmits(['submit'])
 
 
 const generics = ref([])
@@ -25,77 +15,58 @@ const medData = reactive({
   countUnit: '',
 })
 
-const CREATE_MED_MUTATION = gql`
-  mutation createMed(
-    $name: String!,
-    $size: String!,
-    $count: Int!,
-    $countUnit: String!,
-    $genericFor: String!,
-    $price: String!
-  ) {
-    createMed(
-      name: $name,
-      size: $size,
-      count: $count,
-      countUnit: $countUnit,
-      genericFor: $genericFor,
-      price: $price
-    ) {
-      id
-      name
-      size
-      count
-      countUnit
-      genericFor
-      price
-    }
-  }
-`;
 
+const {data: genericData} = useNuxtData('meds')
+console.log(genericData.value)
 
-const { data } = useLazyAsyncQuery(query)
 
-generics.value = [...new Set(data.value?.meds.map(item => item.genericFor))];
+if (!genericData) {
+  const {data} = await useFetch('/api/meds/all', {key: 'meds'})
+  //@ts-ignore
+  generics.value = [...new Set(data.value?.map(item => item.genericFor))];
+  const filteredList = computed(() => {
+    if (!medData.genericFor) {
+      // If no filter text is provided, return all items
+      return generics.value
+    }
 
+    return generics.value.filter(item =>
+        item.toLowerCase().includes(medData.genericFor.toString().toLowerCase())
+    );
+  })
+}
+//@ts-ignore
+generics.value = [...new Set(genericData.value?.map(item => item.genericFor))];
 const filteredList = computed(() => {
   if (!medData.genericFor) {
     // If no filter text is provided, return all items
     return generics.value
   }
 
   return generics.value.filter(item =>
-    item.toLowerCase().includes(medData.genericFor.toString().toLowerCase())
+      item.toLowerCase().includes(medData.genericFor.toString().toLowerCase())
   );
 })
 
-const { mutate: createMed } = useMutation(CREATE_MED_MUTATION)
+
 
 async function saveMed() {
   try {
-    const response = await createMed({ ...medData, count: parseInt(medData.count) });
-    emit('submit')
+    const res = await $fetch('/api/meds/add', {
+      method: 'POST',
+      body: {...medData, count: parseInt(medData.count)},
+    })
+    console.log(res)
+    if (res.status === 200) {
+      emit('submit')
+    }
   } catch (e) {
     // console.log(e)
   }
 }
 
 const showDropDown = ref(false)
 
-// onMounted(async() =>{
-//   try{
-//     const {data} = useAsyncQuery(query)
-//     if(data.value?.meds){
-//       console.log(data.value.meds)
-//     }
-//     // const newArray = uniqueGenericFor.map(item => {
-//     //   return {genericFor: item}
-//     // })
-//   } catch (error) {
-//     console.log(error)
-//   }
-// })
-
 const selectGeneric = (med) => {
   showDropDown.value = false
   filterText.value = med;
@@ -119,14 +90,16 @@ const selectGeneric = (med) => {
               <div>
                 <input class="bg-slate-100" v-model="medData.genericFor" type="text">
                 <ul v-if="showDropDown"
-                  class="border border-gray-400 shadow-md shadow-black overflow-auto max-h-40 absolute bg-slate-100 m-1 p-1 rounded">
+                    class="border border-gray-400 shadow-md shadow-black overflow-auto max-h-40 absolute bg-slate-100 m-1 p-1 rounded">
                   <li @click="selectGeneric(med)" class="cursor-pointer hover:bg-gray-200" v-for="med in filteredList">
                     {{ med }}
                   </li>
                 </ul>
                 <span @click="showDropDown = !showDropDown"
-                  class=" cursor-pointer text-xs bg-blue-500 px-2 py-0.5 rounded text-white shadow-md">{{ showDropDown ?
-                  "Hide" : "List" }}</span>
+                      class=" cursor-pointer text-xs bg-blue-500 px-2 py-0.5 rounded text-white shadow-md">{{
+                    showDropDown ?
+                        "Hide" : "List"
+                  }}</span>
               </div>
             </div>
           </div>
@@ -137,22 +110,23 @@ const selectGeneric = (med) => {
           <div class="flex gap-2 justify-between items-center">
             <label for="">Count:</label>
             <input v-model="medData.count" class="bg-slate-100 p-1 border border-gray-400 rounded shadow-md"
-              type="text">
+                   type="text">
           </div>
           <div class="flex gap-2 justify-between items-center">
             <label for="">Count Unit:</label>
             <input v-model="medData.countUnit" class="bg-slate-100 p-1 border border-gray-400 rounded shadow-md"
-              type="text">
+                   type="text">
           </div>
           <div class="flex gap-2 justify-between items-center">
             <label for="">Price:</label>
             <input v-model="medData.price" class="bg-slate-100 p-1 border border-gray-400 rounded shadow-md"
-              type="text">
+                   type="text">
           </div>
         </div>
         <div class="flex mt-3 justify-end gap-2 items-center">
           <button @click="$emit('modalClose')"
-            class="bg-red-500 text-white px-2 py-0.5 rounded shadow-md">Cancel</button>
+                  class="bg-red-500 text-white px-2 py-0.5 rounded shadow-md">Cancel
+          </button>
           <button @click.prevent="saveMed" class="bg-blue-500 text-white px-2 py-0.5 rounded shadow-md">Save</button>
         </div>
       </form>
@@ -161,4 +135,4 @@ const selectGeneric = (med) => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped></style>

components/constantContactForm.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="relative">
+    <!-- Loading state -->
+    <div v-if="!isLoaded" class="min-h-[200px] flex items-center justify-center">
+      <div class="text-[#1f1f1f] text-sm">
+        Loading newsletter signup...
+      </div>
+    </div>
+
+    <!-- Constant Contact form container -->
+    <div class="ctct-inline-form w-full transition-opacity duration-300" :class="{ 'opacity-0': !isLoaded }"
+      data-form-id="2554ab37-4cb2-4dcf-8d35-3fc99da11655"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isLoaded = ref(false)
+const CTCT_URL = '//static.ctctcdn.com/js/signup-form-widget/current/signup-form-widget.min.js'
+
+onMounted(() => {
+  // Initialize _ctct_m first
+  if (!window._ctct_m) {
+    const initScript = document.createElement('script')
+    initScript.textContent = 'var _ctct_m = "889d6d8085ba7c40e586c28952e58660";'
+    document.head.appendChild(initScript)
+  }
+
+  // Check if script is already loaded
+  const existingScript = document.querySelector(`script[src="${CTCT_URL}"]`)
+
+  if (existingScript) {
+    waitForForm()
+    return
+  }
+
+  // Load the script if not present
+  const ctctScript = document.createElement('script')
+  ctctScript.src = CTCT_URL
+  ctctScript.async = true
+  ctctScript.defer = true
+
+  ctctScript.onload = () => {
+    waitForForm()
+  }
+
+  document.head.appendChild(ctctScript)
+})
+
+function waitForForm() {
+  // Watch for the form to be fully initialized
+  const observer = new MutationObserver((mutations, obs) => {
+    const formContainer = document.querySelector('.ctct-inline-form')
+    if (formContainer && formContainer.children.length > 0) {
+      isLoaded.value = true
+      obs.disconnect()
+    }
+  })
+
+  observer.observe(document, {
+    childList: true,
+    subtree: true
+  })
+}
+</script>
+
+<style scoped>
+.opacity-0 {
+  opacity: 0;
+}
+</style>

components/discountBanner.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="w-full text-center p-2 bg-pharmaBlue-400 text-xl font-semibold text-white "> Free shipping on all ED
+        medications </div>
+</template>
+
+<script setup>
+
+</script>

components/googleReviewsWidget.vue

@@ -0,0 +1,73 @@
+<!-- ElfsightReviews.vue -->
+<template>
+  <!--    <div class="relative">-->
+  <!--        &lt;!&ndash; Loading state &ndash;&gt;-->
+  <!--        <div v-if="!isLoaded" class="min-h-[200px] flex items-center justify-center">-->
+  <!--            <div class="text-gray-500">-->
+  <!--                Loading reviews...-->
+  <!--            </div>-->
+  <!--        </div>-->
+
+  <!--        &lt;!&ndash; Widget container &ndash;&gt;-->
+  <!--        <div :class="['elfsight-app-c793700b-bf3a-4527-a556-7c86f6c6d935',-->
+  <!--            { 'opacity-0': !isLoaded }]"></div>-->
+  <!--    </div>-->
+</template>
+
+<!--<script setup>-->
+<!--import { ref, onMounted } from 'vue'-->
+
+<!--const isLoaded = ref(false)-->
+<!--const ELFSIGHT_URL = 'https://static.elfsight.com/platform/platform.js'-->
+
+<!--onMounted(() => {-->
+<!--    // Check if script is already loaded-->
+<!--    const existingScript = document.querySelector(`script[src="${ELFSIGHT_URL}"]`)-->
+
+<!--    if (existingScript) {-->
+<!--        // If script exists, wait for platform to be ready-->
+<!--        waitForElfsight()-->
+<!--        return-->
+<!--    }-->
+
+<!--    // Load script if not already present-->
+<!--    const script = document.createElement('script')-->
+<!--    script.src = ELFSIGHT_URL-->
+<!--    script.async = true-->
+<!--    script.defer = true-->
+
+<!--    script.onload = () => {-->
+<!--        waitForElfsight()-->
+<!--    }-->
+
+<!--    document.head.appendChild(script)-->
+<!--})-->
+
+<!--function waitForElfsight() {-->
+<!--    // Check if Elfsight platform is ready-->
+<!--    if (window.elfsight && window.elfsight.isInitialized) {-->
+<!--        isLoaded.ref(true)-->
+<!--        return-->
+<!--    }-->
+
+<!--    // If not ready, wait for platform initialization-->
+<!--    const observer = new MutationObserver((mutations, obs) => {-->
+<!--        const widget = document.querySelector('.elfsight-app-c793700b-bf3a-4527-a556-7c86f6c6d935')-->
+<!--        if (widget && widget.children.length > 0) {-->
+<!--            isLoaded.value = true-->
+<!--            obs.disconnect()-->
+<!--        }-->
+<!--    })-->
+
+<!--    observer.observe(document, {-->
+<!--        childList: true,-->
+<!--        subtree: true-->
+<!--    })-->
+<!--}-->
+<!--</script>-->
+
+<style scoped>
+.opacity-0 {
+  opacity: 0;
+}
+</style>

components/howToCards.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="xl:px-36 px-4" :class="{ 'overflow-hidden': isOpen }">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <!-- Card 1 -->
             <div class="bg-white rounded-lg shadow-md p-6 space-y-2">
                 <div class="bg-blue-100 rounded-full w-16 h-16 flex items-center mx-auto justify-center mb-4">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none"
@@ -19,7 +18,6 @@
                 </a>
             </div>
 
-            <!-- Card 2 -->
             <div class="bg-white rounded-lg shadow-md p-6">
                 <div class="bg-green-100 rounded-full w-16 h-16 flex items-center mx-auto justify-center mb-4">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500" fill="none"
@@ -33,7 +31,6 @@
                     any questions.</p>
             </div>
 
-            <!-- Card 3 -->
             <div class="bg-white rounded-lg shadow-md p-6">
                 <div class="bg-red-100 rounded-full w-16 h-16 flex items-center mx-auto justify-center mb-4">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500" fill="none" viewBox="0 0 24 24"