-
Notifications
You must be signed in to change notification settings - Fork 329
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 105a6-improve-ui-checkbox/switch
- Loading branch information
Showing
7 changed files
with
204 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
108 changes: 108 additions & 0 deletions
108
client/components/open/forms/components/FirstSubmissionModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters