From 76678e4a87bc224fd5ced0cfb3ef9931740da364 Mon Sep 17 00:00:00 2001 From: Dmytro Tolok Date: Thu, 10 Aug 2023 05:21:57 +0200 Subject: [PATCH] feat: Email notifications (#3942) * feat: Add subscription form to email report (#3754) * feat: add subscribtion form to email report * feat: add the email notification form to profile page * feat: show subscription result in modal * fix(UI): move the whole subscribe logic into modal * refactor: move the subscription handler into a composable * feat: require wallet ownership proof * fix: fix typo * Update src/locales/default.json Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com> * fix: remove redundant submit button * refactor: extract sign function into helper and UI improvement * fix: fix form input not passing the value * refactor: remove `timestamp` from data type * Update src/components/ModalEmailSubscription.vue Co-authored-by: Dmytro Tolok * fix(email modal): remove unnecessary event * fix(email subscription): add translation to button caption * fix(helpers:sign): fix signer defining and remove check ignore comment * fix(eslint): update .eslintrc-auto-import.json file * fix(text): fix default text for emailSubscription.inputCaption * fix(text): change texting for success message of email subscription * feat(email subscription): add subscribe form to the modal after voting * fix(email subscription): Changed the view of email subscription success modal * fix(email subscription): change text for success subscription modal * fix(texting): fix placeholder for email input Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com> * fix(texting): fix translation for email form Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com> * fix(UI): improve success message UI --------- Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com> Co-authored-by: Dmytro Tolok * feat(email management): add functionality for managing email subscriptions (#3907) * feat: add subscribtion form to email report * feat: add the email notification form to profile page * feat: show subscription result in modal * fix(UI): move the whole subscribe logic into modal * refactor: move the subscription handler into a composable * feat: require wallet ownership proof * fix: fix typo * Update src/locales/default.json * fix: remove redundant submit button * refactor: extract sign function into helper and UI improvement * fix: fix form input not passing the value * refactor: remove `timestamp` from data type * Update src/components/ModalEmailSubscription.vue * fix(email modal): remove unnecessary event * fix(email subscription): add translation to button caption * fix(helpers:sign): fix signer defining and remove check ignore comment * fix(eslint): update .eslintrc-auto-import.json file * fix(text): fix default text for emailSubscription.inputCaption * fix(text): change texting for success message of email subscription * feat(email subscription): add subscribe form to the modal after voting * fix(email subscription): Changed the view of email subscription success modal * fix(email subscription): change text for success subscription modal * fix(texting): fix placeholder for email input * fix(texting): fix translation for email form * fix(UI): improve success message UI * feat(jsonrpc): add interfaces for JSON-RPC * refactor(sign): simplified interface for `sign` helper * refactor(useEmailSubscription): flattify structure * feat(subscr.managm.): load current user subscriptions on page load * feat(subscriptions): Add new prop to `useEmailSubscription` composable * feat(subscr.update): add method for updating subscriptions * refactor(subscriptions): minor changes to code * feat(subscr.managm.): add modal * feat(menu): udated menu to show proper modal * refactor(subscriptions): replace redundant prop to composable In scope of this added loading subscriptions right after closing subscription modal * refactor(change naming): Change name for email management modal * refactor(subscriptions): add HOC component for defining which modal to show * feat(signing): change method from regular sign to signing with alias * refactor(comment): remove old commented code * feat(translations): add translations * fix(scaffolds): remove redundat scaffolding code * refactor(email managm.): remove redundat function wrapper * fix(CR): fix CR comments 1. Removed $attrs in ModalEmailHOC 2. fixed signing with aliases functionality 3. removed hardcodded email and added comment why we still need empty line 4. removed redundant `}` * fix(HOC): remove HOC component since it is redundant * fix(ui-lib): use tune checkbox * fix(navbar): prevent rendering navbar account component until account is not loaded * refactor(useEmailSubscription): split composable on multiple for separation of concepts * fix(types): remove redundant interfaces * fix(eof): add empty line * fix(useFetch): remove redundant arguments * fix(lint): fix lint errors * fix(switch): change custom switch to ui lib `tune` * chore(tune): update version * fix(CR): remove old styles * fix namings * fix(CR): remove custom styles --------- Co-authored-by: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com> Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com> * feat(alias revert): revert back sign with alias feature * feat(subscription status): handle subscriber status from api * feat(verify modal): add verify modal * fix(revert): revert BaseMessage success status * revert(tune): revert redundant style of checkbox * fix(eslint): remove unused variable * fix(subscription): add additional check for data * fix(email management): change the order of options * fix(fonts): fix fonts for tune sublabel * fix(packages): upgrade packages after wrong merge * refactor(html): remove redundant condition for is-disabled prop * fix(verify email): change title * chore(submodule): updated submodule * fix(email): removed masked email from resend modal * fix(vote): remove subscribe button after vote action if user subscribed * feat(error handling): add error handling on subscription update request * feat(notify): add flach notifications on attempt to update email settings * fix(vote): fix wrong check * refactor(name): change name of variable * fix(error modal): remove error modal view on subscribe fail * chore: fix definition order * fix: use same text for all subscriptions state * fix: fix definition order * fix: fix missing plural * fix: fix unused variable --------- Co-authored-by: Wan <495709+wa0x6e@users.noreply.github.com> Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com> --- .env | 1 + .eslintrc-auto-import.json | 2 + src/components/MenuAccount.vue | 40 ++++++++- src/components/ModalEmailManagement.vue | 75 ++++++++++++++++ src/components/ModalEmailResend.vue | 23 +++++ src/components/ModalEmailSubscription.vue | 101 ++++++++++++++++++++++ src/components/ModalPostVote.vue | 17 +++- src/components/NavbarAccount.vue | 2 +- src/components/SpaceProposalPage.vue | 7 ++ src/composables/useEmailFetchClient.ts | 89 +++++++++++++++++++ src/composables/useEmailSubscription.ts | 94 ++++++++++++++++++++ src/helpers/sign.ts | 25 ++++++ src/locales/default.json | 33 ++++++- src/style.scss | 4 + yarn.lock | 91 ++++++++----------- 15 files changed, 543 insertions(+), 61 deletions(-) create mode 100644 src/components/ModalEmailManagement.vue create mode 100644 src/components/ModalEmailResend.vue create mode 100644 src/components/ModalEmailSubscription.vue create mode 100644 src/composables/useEmailFetchClient.ts create mode 100644 src/composables/useEmailSubscription.ts create mode 100644 src/helpers/sign.ts diff --git a/.env b/.env index bb9f877ac46a..b760ccbbbc3d 100644 --- a/.env +++ b/.env @@ -1,6 +1,7 @@ VITE_HUB_URL=https://testnet.snapshot.org VITE_RELAYER_URL=https://testnet.snapshot.org VITE_SCORES_URL=https://score.snapshot.org +VITE_ENVELOP_URL=https://core.envelop.fyi VITE_SIDEKICK_URL=https://sh5.co VITE_BROVIDER_URL=https://rpc.snapshot.org VITE_IPFS_GATEWAY=snapshot.mypinata.cloud diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json index 22443e167abb..4237cc3451dc 100644 --- a/.eslintrc-auto-import.json +++ b/.eslintrc-auto-import.json @@ -116,6 +116,8 @@ "watchTxStatus": true, "toValue": true, "useFlaggedMessageStatus": true, + "useEmailSubscription": true, + "useEmailFetchClient": true, "useStatement": true } } diff --git a/src/components/MenuAccount.vue b/src/components/MenuAccount.vue index 220a9e58a9ae..31e60aceeeaf 100644 --- a/src/components/MenuAccount.vue +++ b/src/components/MenuAccount.vue @@ -4,10 +4,20 @@ const props = defineProps<{ }>(); const emit = defineEmits(['switchWallet']); - +const { t } = useI18n(); const { domain } = useApp(); const { logout } = useWeb3(); const router = useRouter(); +const { userState, loadEmailSubscriptions } = useEmailSubscription(); + +const showModalEmail = ref(false); + +onMounted(loadEmailSubscriptions); +watch(showModalEmail, () => { + if (!showModalEmail.value) { + loadEmailSubscriptions(); + } +}); function handleAction(e) { if (e === 'viewProfile') @@ -19,6 +29,10 @@ function handleAction(e) { params: { address: props.address } }); if (e === 'switchWallet') return emit('switchWallet'); + if (e === 'subscribeEmail') { + showModalEmail.value = true; + return true; + } return logout(); } @@ -38,6 +52,11 @@ function handleAction(e) { action: 'switchWallet', extras: { icon: 'switch' } }, + { + text: t('emailSubscription.title'), + action: 'subscribeEmail', + extras: { icon: 'mail' } + }, { text: 'Log out', action: 'logout', extras: { icon: 'logout' } } ]" @select="handleAction($event)" @@ -57,6 +76,7 @@ function handleAction(e) { class="ml-[2px]" /> + + + + + + + diff --git a/src/components/ModalEmailManagement.vue b/src/components/ModalEmailManagement.vue new file mode 100644 index 000000000000..55fd2e8ad87f --- /dev/null +++ b/src/components/ModalEmailManagement.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/components/ModalEmailResend.vue b/src/components/ModalEmailResend.vue new file mode 100644 index 000000000000..d78069931eea --- /dev/null +++ b/src/components/ModalEmailResend.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/components/ModalEmailSubscription.vue b/src/components/ModalEmailSubscription.vue new file mode 100644 index 000000000000..619b5b224ef7 --- /dev/null +++ b/src/components/ModalEmailSubscription.vue @@ -0,0 +1,101 @@ + + + diff --git a/src/components/ModalPostVote.vue b/src/components/ModalPostVote.vue index c541ad06c67d..09bc69fb0419 100644 --- a/src/components/ModalPostVote.vue +++ b/src/components/ModalPostVote.vue @@ -5,6 +5,7 @@ import { ExtendedSpace, Proposal } from '@/helpers/interfaces'; const { isGnosisSafe } = useClient(); const { shareVote, shareProposalTwitter, shareProposalLenster } = useSharing(); const { web3Account } = useWeb3(); +const { userState } = useEmailSubscription(); const props = defineProps<{ open: boolean; @@ -13,7 +14,12 @@ const props = defineProps<{ selectedChoices: any; }>(); -const emit = defineEmits(['close']); +const emit = defineEmits(['close', 'subscribeEmail']); + +const subscribeEmail = () => { + emit('subscribeEmail'); + emit('close'); +}; const imgPath = computed(() => { return isGnosisSafe.value @@ -80,6 +86,15 @@ function share(shareTo: 'twitter' | 'lenster') { {{ $t('shareOnLenster') }} + + + {{ $t('proposal.postVoteModal.subscribe') }} + +
{