Swag form #196
Swag form #196
Conversation
✅ Deploy Preview for directus-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This pull request adds support for internal form iframes to the application's form system. The changes enable users to embed custom internal forms alongside existing HubSpot and Typeform integrations, with configurable product selection options.
- Introduces new schema types for internal form configuration and product management
- Updates the Form block component to support iframe rendering with dynamic height adjustment
- Adds configuration linking between forms and product selection settings
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| types/schema/schema.ts | Adds new schema collections for internal form configurations |
| types/schema/content/internal-form-config.ts | Defines TypeScript interfaces for form configuration and product relationships |
| types/schema/content/index.ts | Exports the new internal form configuration types |
| types/schema/content/form.ts | Extends Form interface with internal form support and config relationships |
| components/Block/Form.vue | Implements iframe rendering, message handling, and dynamic height adjustment for internal forms |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| 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; |
There was a problem hiding this comment.
The message handler lacks proper error handling for malformed URLs. If block.value.form.internal_form_url contains an invalid URL, the new URL() constructor will throw an exception, potentially causing the component to crash. Wrap the URL construction in a try-catch block to handle invalid URLs gracefully.
| 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; | |
| let allowedOrigin: string; | |
| try { | |
| allowedOrigin = new URL(block.value.form.internal_form_url).origin; | |
| } catch (e) { | |
| // Malformed URL, ignore the message | |
| return; | |
| } |
Copilot uses AI. Check for mistakes.
| onMounted(() => { | ||
| if (block.value?.form.internal_form_url) { | ||
| window.addEventListener('message', handleMessage); | ||
| } | ||
| }); | ||
| onBeforeUnmount(() => { | ||
| if (block.value?.form.internal_form_url) { | ||
| window.removeEventListener('message', handleMessage); | ||
| } | ||
| }); |
There was a problem hiding this comment.
The event listeners are added/removed based on the initial value of block.value?.form.internal_form_url but this reactive value could change during the component's lifecycle. If the URL changes from null to a valid URL after mounting, no event listener will be added. Consider using a watcher to handle dynamic changes to the internal form URL.
Copilot uses AI. Check for mistakes.
2 participants
Adds internal form iframe for swag form and links to config options that allow user to select different products availability and how many products a user can select