Swag form

components/Block/Form.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from 'vue';
 import type { BlockProps } from './types';
 import useVisualEditing from '~/composables/useVisualEditing';
 
@@ -15,13 +16,63 @@ const { data: block, refresh } = useAsyncData(props.uuid, () =>
 				'alignment',
 				'show_labels',
 				'inline',
-				{ form: ['hubspot_form_id', 'typeform_form_id', 'route_to_meeting_link_on_success'] },
+				{
+					form: [
+						'hubspot_form_id',
+						'typeform_form_id',
+						'internal_form_url',
+						'route_to_meeting_link_on_success',
+						'form_config',
+					],
+				},
 			],
 		}),
 	),
 );
 
+const { data: formConfigSlug } = useAsyncData(`form-config-slug-${block.value?.form?.form_config}`, async () => {
+	if (block.value?.form?.form_config && typeof block.value.form.form_config === 'string') {
+		const config = await $directus.request(
+			$readItem('internal_form_config', block.value.form.form_config, {
+				fields: ['slug'],
+			}),
+		);
+
+		return config.slug;
+	}
+
+	return null;
+});
+
 autoApply(`[data-block-id="${props.uuid}"]`, refresh);
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+const handleMessage = (event: MessageEvent) => {
+	if (!iframeRef.value || !block.value?.form.internal_form_url) return;
+
+	const allowedOrigin = new URL(block.value.form.internal_form_url).origin;
+
+	if (allowedOrigin !== '*' && event.origin !== allowedOrigin) return;
+
+	const { type, height, scrollToTop } = event.data || {};
+
+	if (type === 'set-height' && typeof height === 'number') {
+		iframeRef.value.style.height = `${height}px`;
+
+		if (scrollToTop) {
+			window.scrollTo({ top: 0, behavior: 'smooth' });
+		}
+	}
+};
+
+onMounted(() => {
+	window.addEventListener('message', handleMessage);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('message', handleMessage);
+});
 </script>
 
 <template>
@@ -44,8 +95,9 @@ autoApply(`[data-block-id="${props.uuid}"]`, refresh);
 				: undefined
 		"
 	/>
+
 	<BaseTypeForm
-		v-if="block && block.form.typeform_form_id"
+		v-else-if="block && block.form.typeform_form_id"
 		:data-block-id="props.uuid"
 		:form-id="block.form.typeform_form_id"
 		:labels="block.show_labels"
@@ -62,4 +114,63 @@ autoApply(`[data-block-id="${props.uuid}"]`, refresh);
 				: undefined
 		"
 	/>
+
+	<div
+		v-else-if="block && block.form.internal_form_url"
+		class="form"
+		:class="[{ 'hide-labels': !block.show_labels, inline: block.inline }, `align-${block.alignment ?? 'center'}`]"
+		:data-block-id="props.uuid"
+		:data-directus="
+			isVisualEditingEnabled
+				? setAttr({
+						collection: 'block_form',
+						item: block.id,
+						fields: ['alignment', 'show_labels', 'inline', 'form'],
+						mode: 'modal',
+					})
+				: undefined
+		"
+	>
+		<iframe
+			:src="formConfigSlug ? `${block.form.internal_form_url}?config=${formConfigSlug}` : block.form.internal_form_url"
+			ref="iframeRef"
+			class="w-full border-none"
+			scrolling="no"
+			frameborder="0"
+		/>
+	</div>
 </template>
+
+<style scoped lang="scss">
+.form {
+	&.align-left {
+		text-align: left;
+	}
+
+	&.align-center {
+		text-align: center;
+	}
+
+	&.inline {
+		display: inline-block;
+	}
+
+	:deep(iframe) {
+		width: 100%;
+		max-width: 100%;
+		margin: 0 auto;
+		transition: var(--duration-150) var(--ease-out);
+
+		&:hover {
+			border-color: var(--gray-400);
+			transition: none;
+		}
+
+		&:focus-within {
+			border-color: var(--primary);
+			outline: none;
+			box-shadow: 0px 0px var(--space-1) 0px var(--primary-100);
+		}
+	}
+}
+</style>

types/schema/content/form.ts

@@ -1,15 +1,19 @@
 import type { User } from '../system/index.js';
+import type { InternalFormConfig } from './internal-form-config.js';
 
 export interface Form {
+	/** @primaryKey */
 	id: string;
 	sort: number | null;
 	user_created: string | User | null;
 	date_created: string | null;
 	user_updated: string | User | null;
 	date_updated: string | null;
-	type: string | null;
-	title: string | null;
-	hubspot_form_id: string | null;
-	typeform_form_id: string | null;
-	route_to_meeting_link_on_success: boolean | null;
+	type?: 'hubspot' | 'typeform' | 'internal' | null;
+	title?: string | null;
+	hubspot_form_id?: string | null;
+	route_to_meeting_link_on_success?: boolean | null;
+	typeform_form_id?: string | null;
+	internal_form_url?: string | null;
+	form_config?: InternalFormConfig | string | null;
 }

types/schema/content/index.ts

@@ -9,3 +9,5 @@ export type * from './agency-partner.js';
 export type * from './feature.js';
 export type * from './marketplace.js';
 export type * from './testimonials.js';
+export type * from './internal-form-config.js';
+export type * from './product.js';

types/schema/content/internal-form-config.ts

@@ -0,0 +1,25 @@
+import type { User } from '../system/index.js';
+import type { Product } from './product.js';
+
+export interface InternalFormConfig {
+	/** @primaryKey */
+	id: string;
+	status?: 'published' | 'draft' | 'archived';
+	sort?: number | null;
+	user_created?: User | string | null;
+	date_created?: string | null;
+	user_updated?: User | string | null;
+	date_updated?: string | null;
+	Title?: string | null;
+	slug?: string | null;
+	description?: string | null;
+	allow_multiple?: boolean | null;
+	max_quantity?: number | null;
+}
+
+export interface InternalFormConfigProduct {
+	/** @primaryKey */
+	id: number;
+	internal_form_config_id?: InternalFormConfig | string | null;
+	products_id?: Product | string | null;
+}

types/schema/content/product.ts

@@ -0,0 +1,18 @@
+import type { File } from '../system/index.js';
+
+export interface Product {
+	/** @primaryKey */
+	id: string;
+	status?: 'active' | 'out_of_stock' | 'backordered' | 'hidden' | 'inactive';
+	/** @description Name of this product */
+	title?: string | null;
+	/** @description Unique URL for this product */
+	slug?: string | null;
+	description?: string | null;
+	/** @description Main thumbnail used for this product */
+	thumbnail?: File | string | null;
+	/** @description What colors are available? */
+	color?: 'gray' | null;
+	/** @description What sizes are available? */
+	size?: 'gray' | null;
+}

types/schema/schema.ts

@@ -64,6 +64,9 @@ import type {
 	Template,
 	Extension,
 	Testimonial,
+	InternalFormConfig,
+	InternalFormConfigProduct,
+	Product,
 } from './content/index.js';
 import type { Globals, Navigation, Redirect, Seo } from './meta/index.js';
 import type { ContentType, Page, PageBlock } from './routes/index.js';
@@ -86,6 +89,9 @@ export interface Schema {
 	events: Event[];
 	features: Feature[];
 	testimonials: Testimonial[];
+	internal_form_config: InternalFormConfig[];
+	internal_form_config_products: InternalFormConfigProduct[];
+	products: Product[];
 
 	// Partner Program
 	agency_partners: AgencyPartner[];