Remove old code related to notifications (#363)
* Integrations Refactoring - WIP * integrations list & edit - WIP * Fix integration store binding issue * integrations refactor - WIP * Form integration - WIP * Form integration Edit - WIP * Integration Refactor - Slack - WIP * Integration Refactor - Discord - WIP * Integration Refactor - Webhook - WIP * Integration Refactor - Send Submission Confirmation - WIP * Integration Refactor - Backend handler - WIP * Form Integration Status field * Integration Refactor - Backend SubmissionConfirmation - WIP * IntegrationMigration Command * skip confirmation email test case * Small refactoring * FormIntegration status active/inactive * formIntegrationData to integrationData * Rename file name with Integration suffix for integration realted files * Loader on form integrations * WIP * form integration test case * WIP * Added Integration card - working on refactoring * change location for IntegrationCard and update package file * Form Integration Create/Edit in single Modal * Remove integration extra pages * crisp_help_page_slug for integration json * integration logic as collapse * UI improvements * WIP * Trying to debug vue devtools * WIP for integrations * getIntegrationHandler change namespace name * useForm for integration fields + validation structure * Integration Test case & apply validation rules * Apply useform changes to integration other files * validation rules for FormNotificationsMessageActions fields * Zapier integration as coming soon * Update FormCleaner * set default settings for confirmation integration * WIP * Finish validation for all integrations * Updated purify, added integration formatData * Fix testcase * Ran pint; working on integration errors * Handle integration events * Remove old code related to notifications * command for Delete Old Integration Events * Display Past Events in Modal * on Integration event create with status error send email to form creator * Polish styling * Minor improvements * Finish badge and integration status * Fix tests and add an integration event test * Run linters --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
GitHub
@@ -58,7 +58,6 @@
|
||||
<form-information />
|
||||
<form-structure />
|
||||
<form-customization />
|
||||
<form-notifications />
|
||||
<form-about-submission />
|
||||
<form-access />
|
||||
<form-security-privacy />
|
||||
@@ -90,7 +89,6 @@ import FormStructure from './form-components/FormStructure.vue'
|
||||
import FormCustomization from './form-components/FormCustomization.vue'
|
||||
import FormCustomCode from './form-components/FormCustomCode.vue'
|
||||
import FormAboutSubmission from './form-components/FormAboutSubmission.vue'
|
||||
import FormNotifications from './form-components/FormNotifications.vue'
|
||||
import FormEditorPreview from './form-components/FormEditorPreview.vue'
|
||||
import FormSecurityPrivacy from './form-components/FormSecurityPrivacy.vue'
|
||||
import FormCustomSeo from './form-components/FormCustomSeo.vue'
|
||||
@@ -104,7 +102,6 @@ export default {
|
||||
components: {
|
||||
FormEditorSidebar,
|
||||
FormEditorPreview,
|
||||
FormNotifications,
|
||||
FormAboutSubmission,
|
||||
FormCustomCode,
|
||||
FormCustomization,
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<editor-options-panel name="Notifications & Integrations" :already-opened="true" :has-pro-tag="true">
|
||||
<template #icon>
|
||||
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6M22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6M22 6L12 13L2 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<form-notifications-option class="mt-2" />
|
||||
<form-notifications-submission-confirmation />
|
||||
<form-notifications-slack />
|
||||
<form-notifications-discord />
|
||||
<form-notifications-webhook />
|
||||
<v-button color="white"
|
||||
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
|
||||
:href="zapierUrl" target="_blank"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<svg class="w-5 h-5 inline text-yellow-500" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M318 256c0 19-4 36-10 52-16 7-34 10-52 10-19 0-36-3-52-9-7-17-10-34-10-53 0-18 3-36 10-52 16-6 33-10 52-10 18 0 36 4 52 10 6 16 10 34 10 52zm182-41H355l102-102c-8-11-17-22-26-32-10-9-21-18-32-26L297 157V12c-13-2-27-3-41-3s-28 1-41 3v145L113 55c-12 8-22 17-32 26-10 10-19 21-27 32l102 102H12s-3 27-3 41 1 28 3 41h144L54 399c16 23 36 43 59 59l102-102v144c13 2 27 3 41 3s28-1 41-3V356l102 102c11-8 22-17 32-27 9-10 18-20 26-32L355 297h145c2-13 3-27 3-41s-1-28-3-41z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="flex-grow text-center font-normal">
|
||||
Zapier Integration
|
||||
</p>
|
||||
</div>
|
||||
</v-button>
|
||||
|
||||
</editor-options-panel>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EditorOptionsPanel from '../../../editors/EditorOptionsPanel.vue'
|
||||
import FormNotificationsOption from './components/FormNotificationsOption.vue'
|
||||
import FormNotificationsSlack from './components/FormNotificationsSlack.vue'
|
||||
import FormNotificationsDiscord from './components/FormNotificationsDiscord.vue'
|
||||
import FormNotificationsSubmissionConfirmation from './components/FormNotificationsSubmissionConfirmation.vue'
|
||||
import FormNotificationsWebhook from './components/FormNotificationsWebhook.vue'
|
||||
import opnformConfig from "~/opnform.config.js";
|
||||
|
||||
export default {
|
||||
components: { FormNotificationsSubmissionConfirmation, FormNotificationsSlack, FormNotificationsDiscord, FormNotificationsOption, EditorOptionsPanel, FormNotificationsWebhook },
|
||||
props: {},
|
||||
setup () {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
const {content: form} = storeToRefs(workingFormStore)
|
||||
return {
|
||||
workingFormStore,
|
||||
form,
|
||||
opnformConfig
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
zapierUrl () {
|
||||
return opnformConfig.links.zapier_integration
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,90 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
|
||||
@click.prevent="showModal=true"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M7.5 7.5c3.5 -1 5.5 -1 9 0"></path><path d="M7 16.5c3.5 1 6.5 1 10 0"></path><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-1 2.5"></path><path d="M8.5 17c0 1 -1.356 3 -1.832 3c-1.429 0 -2.698 -1.667 -3.333 -3c-.635 -1.667 -.476 -5.833 1.428 -11.5c1.388 -1.015 2.782 -1.34 4.237 -1.5l1 2.5"></path></svg>
|
||||
<p class="flex-grow text-center">
|
||||
Discord Notifications
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="form.notifies_discord">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 text-nt-blue"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<modal :show="showModal" @close="showModal=false">
|
||||
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
|
||||
Discord Notifications
|
||||
<pro-tag />
|
||||
</h2>
|
||||
<toggle-switch-input name="notifies_discord" :form="form" class="mt-4"
|
||||
label="Receive a Discord notification on submission"
|
||||
/>
|
||||
<template v-if="form.notifies_discord">
|
||||
<text-input name="discord_webhook_url" :form="form" class="mt-4"
|
||||
label="Discord webhook url" help="help"
|
||||
>
|
||||
<template #help>
|
||||
Receive a discord message on each form submission.
|
||||
<a href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks" target="_blank">Click
|
||||
here</a> to learn how to get a discord webhook url.
|
||||
</template>
|
||||
</text-input>
|
||||
<h4 class="font-bold mt-4">Discord message actions</h4>
|
||||
<form-notifications-message-actions v-model="form.notification_settings.discord" />
|
||||
</template>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useWorkingFormStore } from '../../../../../../stores/working_form'
|
||||
import ProTag from '~/components/global/ProTag.vue'
|
||||
import FormNotificationsMessageActions from './FormNotificationsMessageActions.vue'
|
||||
|
||||
export default {
|
||||
components: { ProTag, FormNotificationsMessageActions },
|
||||
props: {},
|
||||
setup () {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
return {
|
||||
workingFormStore
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
form: {
|
||||
get () {
|
||||
return this.workingFormStore.content
|
||||
},
|
||||
/* We add a setter */
|
||||
set (value) {
|
||||
this.workingFormStore.set(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
if(!this.form.notification_settings.discord || Array.isArray(this.form.notification_settings.discord)){
|
||||
this.form.notification_settings.discord = {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<toggle-switch-input name="include_submission_data" v-model="compVal.include_submission_data" class="mt-4"
|
||||
label="Include submission data"
|
||||
help="With form submission answers"
|
||||
/>
|
||||
<toggle-switch-input name="link_open_form" v-model="compVal.link_open_form" class="mt-4"
|
||||
label="'Open Form' Link"
|
||||
help="Link to the form public page"
|
||||
/>
|
||||
<toggle-switch-input name="link_edit_form" v-model="compVal.link_edit_form" class="mt-4"
|
||||
label="'Edit Form' Link"
|
||||
help="Link to the form admin page"
|
||||
/>
|
||||
<toggle-switch-input name="views_submissions_count" v-model="compVal.views_submissions_count" class="mt-4"
|
||||
label="Form Analytics" help="Form views and submissions count"
|
||||
/>
|
||||
<toggle-switch-input name="link_edit_submission" v-model="compVal.link_edit_submission" class="mt-4"
|
||||
label="Edit Submission Link"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FormNotificationsMessageActions',
|
||||
components: { },
|
||||
props: {
|
||||
modelValue: { required: false }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
content: this.modelValue ?? {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
compVal: {
|
||||
set (val) {
|
||||
this.content = val
|
||||
this.$emit('input', this.compVal)
|
||||
},
|
||||
get () {
|
||||
return this.content
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
modelValue (val) {
|
||||
this.content = val
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
if(this.compVal === undefined || this.compVal === null){
|
||||
this.compVal = {}
|
||||
}
|
||||
['include_submission_data', 'link_open_form', 'link_edit_form', 'views_submissions_count', 'link_edit_submission'].forEach((keyname) => {
|
||||
if (this.compVal[keyname] === undefined) {
|
||||
this.compVal[keyname] = true
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: { }
|
||||
}
|
||||
</script>
|
||||
@@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
|
||||
@click.prevent="showModal=true"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 inline"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
|
||||
/>
|
||||
</svg>
|
||||
<p class="flex-grow text-center">
|
||||
Email Notifications
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="form.notifies">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 text-nt-blue"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<modal :show="showModal" @close="showModal=false">
|
||||
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
|
||||
Form Notifications
|
||||
<pro-tag />
|
||||
</h2>
|
||||
<toggle-switch-input name="notifies" :form="form" class="mt-4"
|
||||
label="Receive email notifications on submission"
|
||||
|
||||
/>
|
||||
<template v-if="form.notifies">
|
||||
<text-input name="notification_reply_to"
|
||||
v-model="form.notification_settings.notification_reply_to" class="mt-4"
|
||||
label="Notification Reply To"
|
||||
:help="notifiesHelp"
|
||||
/>
|
||||
<text-area-input name="notification_emails" :form="form" class="mt-4"
|
||||
label="Notification Emails" help="Add one email per line"
|
||||
/>
|
||||
</template>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProTag from '~/components/global/ProTag.vue'
|
||||
|
||||
export default {
|
||||
components: { ProTag },
|
||||
setup () {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
const {content: form} = storeToRefs(workingFormStore)
|
||||
return {
|
||||
form,
|
||||
workingFormStore
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
replayToEmailField () {
|
||||
const emailFields = this.form.properties.filter((field) => {
|
||||
return field.type === 'email' && !field.hidden
|
||||
})
|
||||
if (emailFields.length === 1) return emailFields[0]
|
||||
return null
|
||||
},
|
||||
notifiesHelp () {
|
||||
if (this.replayToEmailField) {
|
||||
return 'If empty, Reply-to for this notification will be the email filled in the field "' + this.replayToEmailField.name + '".'
|
||||
}
|
||||
return 'If empty, Reply-to for this notification will be your own email. Add a single email field to your form, and it will automatically become the reply to value.'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
|
||||
@click.prevent="showModal=true"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z" /><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z" /><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z" /><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z" /><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z" /><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z" /><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z" /></svg>
|
||||
<p class="flex-grow text-center">
|
||||
Slack Notifications
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="form.notifies_slack">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 text-nt-blue"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<modal :show="showModal" @close="showModal=false">
|
||||
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
|
||||
Slack Notifications
|
||||
<pro-tag />
|
||||
</h2>
|
||||
<toggle-switch-input name="notifies_slack" :form="form" class="mt-4"
|
||||
label="Receive a Slack notification on submission"
|
||||
/>
|
||||
<template v-if="form.notifies_slack">
|
||||
<text-input name="slack_webhook_url" :form="form" class="mt-4"
|
||||
label="Slack webhook url" help="help"
|
||||
>
|
||||
<template #help>
|
||||
Receive slack message on each form submission. <a href="https://api.slack.com/messaging/webhooks"
|
||||
target="_blank"
|
||||
>Click here</a> to learn how to get a slack
|
||||
webhook url
|
||||
</template>
|
||||
</text-input>
|
||||
<h4 class="font-bold mt-4">Slack message actions</h4>
|
||||
<form-notifications-message-actions v-model="form.notification_settings.slack" />
|
||||
</template>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useWorkingFormStore } from '../../../../../../stores/working_form'
|
||||
import ProTag from '~/components/global/ProTag.vue'
|
||||
import FormNotificationsMessageActions from './FormNotificationsMessageActions.vue'
|
||||
|
||||
export default {
|
||||
components: { ProTag, FormNotificationsMessageActions },
|
||||
props: {},
|
||||
setup () {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
return {
|
||||
workingFormStore
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
form: {
|
||||
get () {
|
||||
return this.workingFormStore.content
|
||||
},
|
||||
/* We add a setter */
|
||||
set (value) {
|
||||
this.workingFormStore.set(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
if(!this.form.notification_settings.slack || Array.isArray(this.form.notification_settings.slack)){
|
||||
this.form.notification_settings.slack = {}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
|
||||
@click.prevent="showModal=true"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
|
||||
</svg>
|
||||
<p class="flex-grow text-center">
|
||||
Send submission confirmation
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="form.send_submission_confirmation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 text-nt-blue"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<modal :show="showModal" @close="showModal=false">
|
||||
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
|
||||
Submission confirmation
|
||||
<pro-tag />
|
||||
</h2>
|
||||
<toggle-switch-input :disabled="(emailSubmissionConfirmationField===null)?true:null" name="send_submission_confirmation"
|
||||
:form="form" class="mt-4"
|
||||
label="Send submission confirmation" :help="emailSubmissionConfirmationHelp"
|
||||
/>
|
||||
<template v-if="form.send_submission_confirmation">
|
||||
<text-input v-model="form.notification_settings.confirmation_reply_to"
|
||||
name="confirmation_reply_to" class="mt-4"
|
||||
label="Confirmation Reply To" help="help"
|
||||
>
|
||||
<template #help>
|
||||
If empty, Reply-to will be your own email.
|
||||
</template>
|
||||
</text-input>
|
||||
<text-input name="notification_sender"
|
||||
:form="form" class="mt-4"
|
||||
label="Confirmation Email Sender Name" help="Emails will be sent from our email address but you can customize the name of the Sender"
|
||||
/>
|
||||
<text-input name="notification_subject"
|
||||
:form="form" class="mt-4"
|
||||
label="Confirmation email subject" help="Subject of the confirmation email that will be sent"
|
||||
/>
|
||||
<rich-text-area-input name="notification_body"
|
||||
:form="form" class="mt-4"
|
||||
label="Confirmation email content" help="Content of the confirmation email that will be sent"
|
||||
/>
|
||||
<toggle-switch-input name="notifications_include_submission"
|
||||
:form="form" class="mt-4"
|
||||
label="Include submission data" help="If enabled the confirmation email will contain form submission answers"
|
||||
/>
|
||||
</template>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useWorkingFormStore } from '../../../../../../stores/working_form'
|
||||
import ProTag from '~/components/global/ProTag.vue'
|
||||
|
||||
export default {
|
||||
components: { ProTag },
|
||||
props: {},
|
||||
setup () {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
return {
|
||||
workingFormStore
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
form: {
|
||||
get () {
|
||||
return this.workingFormStore.content
|
||||
},
|
||||
/* We add a setter */
|
||||
set (value) {
|
||||
this.workingFormStore.set(value)
|
||||
}
|
||||
},
|
||||
emailSubmissionConfirmationField () {
|
||||
if (!this.form.properties || !Array.isArray(this.form.properties)) return null
|
||||
const emailFields = this.form.properties.filter((field) => {
|
||||
return field.type === 'email' && !field.hidden
|
||||
})
|
||||
if (emailFields.length === 1) return emailFields[0]
|
||||
return null
|
||||
},
|
||||
emailSubmissionConfirmationHelp () {
|
||||
if (this.emailSubmissionConfirmationField) {
|
||||
return 'Confirmation will be sent to the email in the "' + this.emailSubmissionConfirmationField.name + '" field.'
|
||||
}
|
||||
return 'Only available if your form contains 1 email field.'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
emailSubmissionConfirmationField (val) {
|
||||
if (val === null) {
|
||||
this.form.send_submission_confirmation = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
class="flex items-center mt-3 cursor-pointer relative w-full rounded-lg flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
|
||||
@click.prevent="showModal=true"
|
||||
>
|
||||
<div class="flex-grow flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 inline"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 01-.657.643 48.39 48.39 0 01-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 01-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 00-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 01-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 00.657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 01-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 005.427-.63 48.05 48.05 0 00.582-4.717.532.532 0 00-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 00.658-.663 48.422 48.422 0 00-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 01-.61-.58v0z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="flex-grow text-center">
|
||||
Webhook Notifications
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="form.notifies_webhook">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-5 h-5 text-nt-blue"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<modal :show="showModal" @close="showModal=false">
|
||||
<h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
|
||||
Webhook Notifications
|
||||
<pro-tag />
|
||||
</h2>
|
||||
<toggle-switch-input name="notifies_webhook" :form="form" class="mt-4"
|
||||
label="Trigger a webhook notification on form submission"
|
||||
@change="onToggleChange"
|
||||
/>
|
||||
<text-input v-if="form.notifies_webhook" name="webhook_url" :form="form" class="mt-4"
|
||||
label="Webhook url" help="We will post form submissions to this endpoint"
|
||||
/>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useWorkingFormStore } from '../../../../../../stores/working_form'
|
||||
import ProTag from '~/components/global/ProTag.vue'
|
||||
|
||||
export default {
|
||||
components: { ProTag },
|
||||
props: {},
|
||||
setup () {
|
||||
const workingFormStore = useWorkingFormStore()
|
||||
return {
|
||||
workingFormStore
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
form: {
|
||||
get () {
|
||||
return this.workingFormStore.content
|
||||
},
|
||||
/* We add a setter */
|
||||
set (value) {
|
||||
this.workingFormStore.set(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onToggleChange () {
|
||||
if (!this.form.notifies_webhook) {
|
||||
this.form.webhook_url = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user