Adds some basic requirements for make.com (#122)

* wip

* revert updates

* wip

* remove loaders

* wip

* use vite 4.5

* wip

* wip

* wip

* update vue

* wip

* wip

* fix vite config

* improve exception handler for make

* style links in classic form

* add correct make link and fix tailwind config for ui

* add form to form submission response

* add make label to integrations

* add new badge to update item

* change back to vite 4.5.0

* update package.json

* change again

* fix test for getting form submissions

Author: PhilReinking

app/Exceptions/Handler.php

@@ -3,6 +3,7 @@
 namespace App\Exceptions;
 
 use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Throwable;
 
 class Handler extends ExceptionHandler
@@ -34,6 +35,21 @@ class Handler extends ExceptionHandler
      */
     public function register()
     {
+        $this->renderable(function (NotFoundHttpException $e, $request) {
+            if ($request->is('api/forms/*')) {
+                try {
+                    $search = explode('\\', $e->getPrevious()->getModel());
+                    $model = end($search);
+                } catch (\Exception $e) {
+                    $model = 'Record';
+                }
+
+                return response()->json([
+                    'message' => $model.' not found.',
+                ], 404);
+            }
+        });
+
         $this->reportable(function (Throwable $e) {
             //
         });

app/Http/Controllers/Api/FormSubmissionsController.php

@@ -7,6 +7,7 @@
 use Illuminate\Http\Request;
 use Knuckles\Scribe\Attributes\Authenticated;
 use Knuckles\Scribe\Attributes\Group;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 class FormSubmissionsController extends Controller
 {
@@ -25,7 +26,7 @@ public function __invoke(Request $request, string $uuid)
                 ->withUuid($uuid)
                 ->firstOrFail();
         } catch (\Exception $e) {
-            abort(401);
+            throw new NotFoundHttpException('Form not found.', $e);
         }
 
         $resource = FormSessionResource::collection(

app/Http/Resources/FormSessionResource.php

@@ -19,6 +19,7 @@ public function toArray($request)
         return [
             'id' => $this->id,
             'uid' => $this->token,
+            'form' => $this->form->uuid,
             'started_at' => $this->created_at->toDateTimeString(),
             'completed_at' => (string) $this->getRawOriginal('is_completed'),
             'params' => $this->params,

package-lock.json

@@ -11,19 +11,18 @@
         "vue-tsc": "vue-tsc --noEmit -p tsconfig.build.json",
         "tw-config": "tailwind-config-viewer -o",
         "dev": "vite",
-        "build-app": "vite build -c vite.prod-app.config.js",
-        "build-classic": "vite build -c vite.prod-classic.config.js",
+        "build-app": "vite build -c vite.prod-app.config.mjs",
+        "build-classic": "vite build -c vite.prod-classic.config.mjs",
         "build": "npm run lint && npm run vue-tsc && npm run build-app && npm run build-classic",
         "test": "vitest",
         "coverage": "vitest run --coverage"
     },
     "devDependencies": {
         "@pinia/testing": "^0.1.3",
         "@vitest/coverage-c8": "^0.33.0",
-        "@vitest/coverage-v8": "^0.34.6",
         "@vue/test-utils": "^2.4.2",
         "browser-sync": "^2.29.3",
-        "jsdom": "^22.1.0",
+        "jsdom": "^23.0.0",
         "prettier": "^3.1.0",
         "prettier-eslint": "^16.1.2",
         "prettier-plugin-tailwindcss": "^0.5.7",
@@ -33,7 +32,7 @@
         "vitest": "^0.34.6"
     },
     "dependencies": {
-        "@deck9/ui": "^0.13.1",
+        "@deck9/ui": "^0.13.3",
         "@headlessui/vue": "^1.7.16",
         "@highlightjs/vue-plugin": "^2.1.0",
         "@inertiajs/inertia": "^0.11.1",
@@ -45,31 +44,32 @@
         "@tiptap/extension-link": "^2.0.0-beta.36",
         "@tiptap/starter-kit": "^2.0.0-beta.181",
         "@tiptap/vue-3": "^2.0.0-beta.90",
-        "@types/lodash": "^4.14.201",
-        "@types/node": "^20.9.0",
-        "@typescript-eslint/eslint-plugin": "^6.11.0",
-        "@typescript-eslint/parser": "^6.11.0",
-        "@vitejs/plugin-vue": "^4.4.1",
-        "@vue/compiler-sfc": "^3.2.47",
-        "@vueuse/core": "^10.1.2",
+        "@types/lodash": "^4.14.202",
+        "@types/node": "^20.10.0",
+        "@types/ziggy-js": "^1.8.0",
+        "@typescript-eslint/eslint-plugin": "^6.12.0",
+        "@typescript-eslint/parser": "^6.12.0",
+        "@vitejs/plugin-vue": "^4.5.0",
+        "@vitest/coverage-v8": "^0.34.6",
+        "@vueuse/core": "^10.6.1",
         "autoprefixer": "^10.4.16",
         "axios": "^1.6.2",
         "copy-text-to-clipboard": "^3.2.0",
-        "eslint": "^8.53.0",
+        "eslint": "^8.54.0",
         "eslint-plugin-vue": "^9.18.1",
         "floating-vue": "^2.0.0-beta.20",
         "highlight.js": "^11.9.0",
         "laravel-vite-plugin": "^0.8.1",
         "lodash": "^4.17.19",
         "pinia": "^2.1.7",
-        "postcss": "^8.4.24",
+        "postcss": "^8.4.31",
         "postcss-import": "^15.1.0",
         "striptags": "^3.2.0",
         "tailwindcss": "^3.3.5",
         "typescript": "^5.1.3",
         "vite-plugin-css-injected-by-js": "^3.3.0",
-        "vue": "^3.3.8",
-        "vue-i18n": "^9.7.0",
+        "vue": "^3.3.9",
+        "vue-i18n": "^9.7.1",
         "vue-tsc": "^1.8.22",
         "vue3-smooth-dnd": "^0.0.6",
         "yup": "^1.3.2",

package.json

@@ -71,7 +71,7 @@ const props = withDefaults(
   }>(),
   {
     initialForms: () => [],
-  }
+  },
 );
 
 const isLoading = ref(false);

resources/js/Pages/Dashboard.vue

@@ -1,17 +1,31 @@
 <template>
-  <div target="_blank" class="block rounded-lg bg-white px-6 py-8 shadow-sm">
+  <div class="block rounded-lg bg-white px-6 py-8 shadow-sm">
     <h2 class="text-lg font-medium">{{ post.Title }}</h2>
     <span class="text-xs text-grey-500">{{ formattedDate }}</span>
     <p class="mt-2 text-sm leading-6">{{ post.Excerpt }}</p>
-    <a v-if="link" :href="link" target="_blank">
+    <a
+      class="relative"
+      v-if="link"
+      @click="trackRead"
+      :href="link"
+      target="_blank"
+    >
       <D9Button class="mt-2" label="Read more" color="light" />
+      <span
+        v-if="!isRead"
+        class="bg-blue-300 rounded px-2 py-px bg-gradient-to-bl from-purple-600 via-teal-400 to-blue-400 font-bold text-white uppercase text-xs top-0 absolute right-100 -mt-2 -ml-2"
+        >New</span
+      >
     </a>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { D9Button } from "@deck9/ui";
+import { useStorage } from "@vueuse/core";
+
+const state = useStorage<Array<string>>("readPosts", []);
 
 const props = defineProps({
   post: {
@@ -28,6 +42,18 @@ const link = computed<string | null>(() => {
   return `https://getinput.co/changelog/${props.post.Slug}`;
 });
 
+const isRead = computed(() => {
+  return state.value.includes(props.post.Slug);
+});
+
+const trackRead = () => {
+  if (isRead.value) {
+    return;
+  }
+
+  state.value.push(props.post.Slug);
+};
+
 const formattedDate = computed(() => {
   if (!props.post.PublishedDate) {
     return;

resources/js/components/Dashboard/UpdatePost.vue

@@ -14,6 +14,12 @@
                 <Label class="flex-shrink-0" color="grey">{{
                   webhook.webhook_method
                 }}</Label>
+                <Label
+                  v-if="webhook.has_provider && webhook.provider === 'make'"
+                  class="ml-1 flex-shrink-0"
+                  color="black"
+                  >Managed by Make</Label
+                >
                 <p class="ml-1">
                   {{ webhook.webhook_url }}
                 </p>

resources/js/components/Factory/Integrations/IntegrationItem.vue

@@ -22,6 +22,7 @@
 
   <div class="mt-4">
     <D9Button type="button" label="Add Integration" @click="addIntegration" />
+    <MakeButton class="ml-2" />
   </div>
 
   <IntegrationEdit
@@ -40,6 +41,7 @@ import { callGetformWebhooks } from "@/api/webhooks.js";
 import EmptyState from "@/components/EmptyState.vue";
 import IntegrationItem from "@/components/Factory/Integrations/IntegrationItem.vue";
 import IntegrationEdit from "@/components/Factory/Integrations/IntegrationEdit.vue";
+import MakeButton from "@/components/Factory/Integrations/MakeButton.vue";
 
 const store = useForm();
 

resources/js/components/Factory/Integrations/Integrations.vue

@@ -0,0 +1,127 @@
+<template>
+  <button
+    class="relative inline-flex items-center focus:outline-none focus:ring active:ring transition duration-150 ease-in-out text-purple-800 bg-white border-transparent hover:bg-grey-100 hover:text-purple-700 active:bg-grey-100 ring-blue-300 ring-offset-2 dark:ring-offset-grey-900 px-5 py-2 text-sm leading-4 font-medium rounded-lg"
+    @click="useMakeApp"
+  >
+    <span class="mr-1">Automate with</span>
+    <div class="inset-0 inline-flex items-center justify-center">
+      <svg
+        class="h-3"
+        id="Vrstva_1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        viewBox="0 0 882.62 182.13"
+      >
+        <defs>
+          <clipPath id="clippath">
+            <path
+              class="cls-2"
+              d="m156.04,44.34h33.88c2.58,0,4.68,2.1,4.68,4.68v125.07c0,2.58-2.1,4.68-4.68,4.68h-33.88c-2.58,0-4.68-2.1-4.68-4.68V49.02c0-2.58,2.1-4.68,4.68-4.68Z"
+            />
+          </clipPath>
+          <clipPath id="clippath-1">
+            <path
+              class="cls-2"
+              d="m56.66,45.99L.5,157.74c-1.16,2.31-.23,5.12,2.08,6.28l30.27,15.21c2.31,1.16,5.12.23,6.28-2.08l56.16-111.75c1.16-2.31.23-5.12-2.08-6.28l-30.27-15.21c-.68-.34-1.39-.5-2.1-.5-1.71,0-3.36.94-4.18,2.58"
+            />
+          </clipPath>
+          <clipPath id="clippath-2">
+            <path
+              class="cls-2"
+              d="m103.9,46.39l-24.03,121.81c-.5,2.53,1.14,4.98,3.67,5.49l33.21,6.7c2.54.51,5.02-1.14,5.52-3.68l24.03-121.81c.5-2.53-1.14-4.98-3.67-5.49l-33.21-6.7c-.31-.06-.62-.09-.93-.09-2.19,0-4.15,1.54-4.59,3.77"
+            />
+          </clipPath>
+        </defs>
+        <path
+          class="cls-2"
+          d="m302.28,94.98v79.5c0,2.58-2.1,4.68-4.68,4.68h-34.35c-2.59,0-4.68-2.1-4.68-4.68V48.94c0-2.58,2.1-4.68,4.68-4.68h34.35c2.58,0,4.68,2.1,4.68,4.68v9.89c8.63-10.79,20.77-17.54,37.77-17.54,15.92,0,29.68,6.48,38.04,18.62,10.25-12.14,24.82-18.62,42.63-18.62,30.22,0,50.99,17.81,50.99,51.8v81.39c0,2.58-2.1,4.68-4.68,4.68h-34.35c-2.59,0-4.68-2.1-4.68-4.68v-72.21c0-14.84-8.36-22.12-19.7-22.12-9.44,0-17,5.94-21.32,14.84v79.5c0,2.58-2.1,4.68-4.68,4.68h-34.35c-2.59,0-4.68-2.1-4.68-4.68v-72.21c0-14.84-8.36-22.12-19.7-22.12-9.71,0-17,5.94-21.32,14.84"
+        />
+        <path
+          class="cls-2"
+          d="m529.16,181.86c-25.36,0-46.68-16.73-46.68-42.63,0-23.74,15.65-34.81,44.79-42.36l37.24-9.71c-1.08-8.9-8.1-13.22-19.43-13.22-10.04,0-17.26,3.84-20.59,11.52-.93,2.14-3.16,3.4-5.44,2.86l-29.51-7.02c-2.72-.65-4.31-3.55-3.34-6.17,8.47-22.92,32.01-34.93,60.49-34.93,38.31,0,60.44,18.08,60.44,49.91v84.36c0,2.59-2.1,4.68-4.68,4.68h-32.57c-2.54,0-4.62-2.03-4.68-4.57l-.16-7.03-.27.27c-11.06,9.44-21.85,14.03-35.62,14.03m11.06-33.73c5.67,0,9.98-1.62,16.46-5.4l7.55-4.59.27-21.86-19.43,5.4c-13.22,3.78-19.16,7.02-19.16,14.57,0,8.36,7.28,11.87,14.3,11.87"
+        />
+        <path
+          class="cls-2"
+          d="m676.92,115.49l-13.22,12.14v46.85c0,2.59-2.1,4.68-4.68,4.68h-33.54c-2.59,0-4.68-2.1-4.68-4.68V4.68c0-2.58,2.1-4.68,4.68-4.68h33.54c2.58,0,4.68,2.1,4.68,4.68v76.81l39.13-36c.86-.79,2-1.24,3.17-1.24h41.41c4.28,0,6.31,5.26,3.16,8.14l-40.18,36.65,45.82,83.18c1.72,3.12-.54,6.94-4.1,6.94h-39.15c-1.74,0-3.35-.97-4.15-2.52l-31.88-61.16Z"
+        />
+        <path
+          class="cls-2"
+          d="m819.25,182.13c-37.5,0-71.77-23.47-71.77-70.96,0-44.79,32.92-70.69,69.07-70.69s64.76,26.17,65.83,67.45c.12,4.36.19,7.4.23,9.56.04,2.62-2.07,4.74-4.68,4.74h-87.28c1.35,16.19,14.3,26.44,30.76,26.44,11.71,0,21.31-4.87,28.04-13.67,1.49-1.95,4.24-2.4,6.28-1.03l21.8,14.6c2.18,1.46,2.72,4.42,1.25,6.59-11.68,17.19-30.94,26.97-59.52,26.97m-27.79-86.34h47.22c-.27-15.38-11.6-22.12-23.47-22.12-11.06,0-22.39,6.48-23.74,22.12"
+        />
+        <g>
+          <path
+            class="cls-2"
+            d="m156.04,44.34h33.88c2.58,0,4.68,2.1,4.68,4.68v125.07c0,2.58-2.1,4.68-4.68,4.68h-33.88c-2.58,0-4.68-2.1-4.68-4.68V49.02c0-2.58,2.1-4.68,4.68-4.68Z"
+          />
+          <g class="cls-1">
+            <rect
+              class="cls-2"
+              x="129.45"
+              y="41.01"
+              width="87.08"
+              height="141.09"
+              transform="translate(-27.91 66.73) rotate(-20.24)"
+            />
+          </g>
+        </g>
+        <g>
+          <path
+            class="cls-2"
+            d="m56.66,45.99L.5,157.74c-1.16,2.31-.23,5.12,2.08,6.28l30.27,15.21c2.31,1.16,5.12.23,6.28-2.08l56.16-111.75c1.16-2.31.23-5.12-2.08-6.28l-30.27-15.21c-.68-.34-1.39-.5-2.1-.5-1.71,0-3.36.94-4.18,2.58"
+          />
+          <g class="cls-3">
+            <rect
+              class="cls-2"
+              x="-23.86"
+              y="29.77"
+              width="143.51"
+              height="164.28"
+              transform="translate(-40.48 28.2) rotate(-23.38)"
+            />
+          </g>
+        </g>
+        <g>
+          <path
+            class="cls-2"
+            d="m103.9,46.39l-24.03,121.81c-.5,2.53,1.14,4.98,3.67,5.49l33.21,6.7c2.54.51,5.02-1.14,5.52-3.68l24.03-121.81c.5-2.53-1.14-4.98-3.67-5.49l-33.21-6.7c-.31-.06-.62-.09-.93-.09-2.19,0-4.15,1.54-4.59,3.77"
+          />
+          <g class="cls-4">
+            <rect
+              class="cls-2"
+              x="57.56"
+              y="35.23"
+              width="111.05"
+              height="153.08"
+              transform="translate(-31.65 45.95) rotate(-20.21)"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </button>
+</template>
+
+<script lang="ts" setup>
+// TODO: This is harcoded for now, until we are an official app on make.com
+const useMakeApp = () => {
+  window.open(
+    "https://www.make.com/en/hq/app-invitation/ab079bcecb9e0c5545389a8ea96b3079",
+    "_blank",
+  );
+};
+</script>
+
+<style>
+.cls-1 {
+  clip-path: url(#clippath);
+}
+.cls-2 {
+  fill: #1d1d1b;
+}
+.cls-3 {
+  clip-path: url(#clippath-1);
+}
+.cls-4 {
+  clip-path: url(#clippath-2);
+}
+</style>

resources/js/components/Factory/Integrations/MakeButton.vue

@@ -88,7 +88,7 @@ await store.initForm(
     "hideNavigation",
     "focusOnMount",
     "alignLeft",
-  ])
+  ]),
 );
 
 const { locale } = useI18n({ useScope: "global" });
@@ -105,7 +105,7 @@ onMounted(() => {
 const primaryColor = useThemableColor(store.form?.brand_color ?? "#1f2937");
 const contrastColor = useThemableColor(store.form?.contrast_color ?? "#f9fafb");
 const backgroundColor = useThemableColor(
-  store.form?.background_color ?? "#ffffff"
+  store.form?.background_color ?? "#ffffff",
 );
 const textColor = useThemableColor(store.form?.text_color ?? "#000000");
 </script>
@@ -117,4 +117,12 @@ const textColor = useThemableColor(store.form?.text_color ?? "#000000");
   --color-background: v-bind(backgroundColor);
   --color-content: v-bind(textColor);
 }
+
+.text-content {
+  @apply text-base;
+}
+
+.text-content a {
+  @apply text-primary underline;
+}
 </style>