From dea8fe5741846926ed52003082359f0c0949e6da Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 1 Oct 2024 11:42:03 +0100
Subject: [PATCH] 106a6 integration performance issues (#581)

* apply performance fixes

* fix integration

* Update client/components/open/forms/components/FirstSubmissionModal.vue

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix unique cache for forms

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .../Zapier/IntegrationController.php          |   6 +-
 .../Handlers/AbstractIntegrationHandler.php   |  11 +-
 .../forms/components/FirstSubmissionModal.vue | 108 ++++++++++++++++++
 3 files changed, 118 insertions(+), 7 deletions(-)
 create mode 100644 client/components/open/forms/components/FirstSubmissionModal.vue

diff --git a/api/app/Http/Controllers/Integrations/Zapier/IntegrationController.php b/api/app/Http/Controllers/Integrations/Zapier/IntegrationController.php
index 46235897..4a8b97b0 100644
--- a/api/app/Http/Controllers/Integrations/Zapier/IntegrationController.php
+++ b/api/app/Http/Controllers/Integrations/Zapier/IntegrationController.php
@@ -52,11 +52,15 @@ public function poll(PollSubmissionRequest $request)
         $this->authorize('view', $form);
 
         $lastSubmission = $form->submissions()->latest()->first();
+        $submissionData = null;
         if (!$lastSubmission) {
             // Generate fake data when no previous submissions
             $submissionData = (new FormSubmissionDataFactory($form))->asFormSubmissionData()->createSubmissionData();
         }
+        $cacheKey = "zapier-poll-submissions-{$form->id}";
+        return (array) \Cache::remember($cacheKey, 60 * 5, function () use ($form, $submissionData, $lastSubmission) {
+            return [ZapierIntegration::formatWebhookData($form, $submissionData ?? $lastSubmission->data)];
+        });
 
-        return [ZapierIntegration::formatWebhookData($form, $submissionData ?? $lastSubmission->data)];
     }
 }
diff --git a/api/app/Integrations/Handlers/AbstractIntegrationHandler.php b/api/app/Integrations/Handlers/AbstractIntegrationHandler.php
index 7d95ef05..47fc78cb 100644
--- a/api/app/Integrations/Handlers/AbstractIntegrationHandler.php
+++ b/api/app/Integrations/Handlers/AbstractIntegrationHandler.php
@@ -114,13 +114,12 @@ public static function formatWebhookData(Form $form, array $submissionData): arr
 
         // Old format - kept for retro-compatibility
         $oldFormatData = [];
-        foreach ($formatter->getFieldsWithValue() as $field) {
-            $oldFormatData[$field['name']] = $field['value'];
-        }
-
-        // New format using ID
         $formattedData = [];
-        foreach ($formatter->getFieldsWithValue() as $field) {
+        $fieldsWithValue = $formatter->getFieldsWithValue();
+
+        foreach ($fieldsWithValue as $field) {
+            $oldFormatData[$field['name']] = $field['value'];
+            // New format using ID
             $formattedData[$field['id']] = [
                 'value' => $field['value'],
                 'name' => $field['name'],
diff --git a/client/components/open/forms/components/FirstSubmissionModal.vue b/client/components/open/forms/components/FirstSubmissionModal.vue
new file mode 100644
index 00000000..25fbbf99
--- /dev/null
+++ b/client/components/open/forms/components/FirstSubmissionModal.vue
@@ -0,0 +1,108 @@
+<template>
+  <modal
+    :show="show"
+    compact-header
+    backdrop-blur="sm"
+    @close="$emit('close')"
+  >
+    <template #title>
+      <h2 class="text-xl font-medium">
+        🎉 Your first submission! Congratulations!
+      </h2>
+    </template>
+    <div class="">
+      <div class="text-sm text-gray-500">
+        Congratulations on creating your form and receiving your first submission! Your form is now live and ready for action. You can now <span class="font-semibold">share your form</span> with others, or <span class="font-semibold">open your Notion database</span> to view the submitted data.
+      </div>
+
+      <div class="flex gap-2 items-center max-w-full">
+        <ShareFormUrl
+          class="flex-grow my-4"
+          :form="form"
+        />
+        <UButton
+          v-track.form_first_submission_modal_open_db_click
+          color="white"
+          icon="i-logos-notion-icon"
+          :to="form.notion_database_url"
+          target="_blank"
+        >
+          See  Notion database
+        </UButton>
+      </div>
+
+      <p class="text-gray-500 font-medium text-sm text-center my-4">
+        What's next?
+      </p>
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="(item, i) in helpLinks"
+          :key="i"
+          role="button"
+          class="bg-white shadow border border-gray-200 rounded-lg p-4 pb-2 items-center justify-center flex flex-col relative hover:bg-gray-50 group transition-colors"
+          @click="item.action"
+        >
+          <div class="flex justify-center">
+            <div class="h-8 w-8 text-gray-600 group-hover:text-gray-800 transition-colors flex items-center">
+              <Icon
+                :name="item.icon"
+                class=""
+                size="40px"
+              />
+            </div>
+          </div>
+          
+          <p class="text-gray-500 font-medium text-xs text-center my-2">
+            {{ item.label }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+import ShareFormUrl from '~/components/notion/forms/components/ShareFormUrl.vue'
+
+const props = defineProps({
+  show: { type: Boolean, required: true },
+  form: { type: Object, required: true }
+})
+
+const emit = defineEmits(['close'])
+const confetti = useConfetti()
+const crisp = useCrisp()
+
+watch(() => props.show, () => {
+  if (props.show) {
+    confetti.play()
+    useAmplitude().logEvent('form_first_submission_modal_viewed')
+  }
+})
+
+const helpLinks = computed(() => {
+  return [
+    {
+      'label': 'Embed form on your website',
+      'icon': 'heroicons:code-bracket',
+      'action': () => crisp.openHelpdeskArticle('how-to-embed-your-form-on-your-website-yqa6i')
+    },
+    {
+      'label': 'Embed form in Notion',
+      'icon': 'ri:notion-fill',
+      'action': () => crisp.openHelpdeskArticle('can-i-embed-my-form-in-a-notion-page-or-site-11iroj9')
+    },
+    {
+      'label': 'Help Center',
+      'icon': 'heroicons:book-open',
+      'action': () => crisp.openHelpdesk()
+    },
+    {
+      'label': 'Contact Us',
+      'icon': 'heroicons:chat-bubble-left-right',
+      'action': () => { crisp.openAndShowChat() }
+    },
+  ]
+})
+
+</script>