feat(newsletter): add email preferences to settings

packages/card-payment-common/src/schemas/account.ts

@@ -38,6 +38,7 @@ export const AccountSchema = z.object({
   email: z.string().min(1),
   emailConfirmed: z.boolean(),
   hasActiveSubscription: z.boolean(),
+  newsletterConsent: z.boolean(),
   username: z.string().min(1),
   vat: z.number(),
   vatIdStatus: z.string(),

packages/website/app/components/account/home/AccountInformation.vue

@@ -12,7 +12,14 @@ import { toMessages } from '~/utils/validation';
 
 const { t } = useI18n({ useScope: 'global' });
 
-const state = reactive({
+interface ProfileFormState {
+  companyName: string;
+  firstName: string;
+  lastName: string;
+  vatId: string;
+}
+
+const state = reactive<ProfileFormState>({
   firstName: '',
   lastName: '',
   companyName: '',
@@ -94,7 +101,7 @@ const vatStatusErrorMessage = computed<string>(() => {
   return '';
 });
 
-function reset() {
+function reset(): void {
   const userAccount = get(account);
 
   if (!userAccount)
@@ -114,7 +121,7 @@ function reset() {
   get(v$).$reset();
 }
 
-async function update() {
+async function update(): Promise<void> {
   await updateProfile(v$, state);
 }
 
@@ -265,6 +272,7 @@ onMounted(() => {
         {{ t('actions.reset') }}
       </RuiButton>
       <RuiButton
+        data-cy="update-profile"
         :disabled="v$.$invalid"
         size="lg"
         :loading="loading"

packages/website/app/components/account/home/EmailPreferences.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core';
+import { get } from '@vueuse/shared';
+import FloatingNotification from '~/components/account/home/FloatingNotification.vue';
+import { useProfileUpdate } from '~/composables/account/use-profile-update';
+
+interface EmailPreferencesFormState {
+  newsletterConsent: boolean;
+}
+
+const { t } = useI18n({ useScope: 'global' });
+
+const state = reactive<EmailPreferencesFormState>({
+  newsletterConsent: false,
+});
+
+const {
+  $externalResults,
+  account,
+  done,
+  loading,
+  updateProfile,
+} = useProfileUpdate();
+
+const rules = {
+  newsletterConsent: {},
+};
+
+const v$ = useVuelidate(rules, state, {
+  $autoDirty: true,
+  $externalResults,
+});
+
+function reset(): void {
+  const userAccount = get(account);
+  if (!userAccount)
+    return;
+
+  state.newsletterConsent = userAccount.newsletterConsent;
+  get(v$).$reset();
+}
+
+async function update(): Promise<void> {
+  await updateProfile(v$, state);
+}
+
+onBeforeMount(() => {
+  reset();
+});
+</script>
+
+<template>
+  <div class="pt-2">
+    <div class="text-h6 mb-2">
+      {{ t('email_preferences.title') }}
+    </div>
+    <p class="text-rui-text-secondary mb-6">
+      {{ t('email_preferences.description') }}
+    </p>
+
+    <RuiCheckbox
+      id="newsletter-consent"
+      v-model="state.newsletterConsent"
+      color="primary"
+      hide-details
+    >
+      {{ t('email_preferences.newsletter') }}
+    </RuiCheckbox>
+
+    <div class="mt-10 mb-5 border-t border-grey-50" />
+
+    <div class="flex justify-end gap-3">
+      <RuiButton
+        size="lg"
+        color="primary"
+        variant="outlined"
+        @click="reset()"
+      >
+        {{ t('actions.reset') }}
+      </RuiButton>
+      <RuiButton
+        data-cy="update-email-preferences"
+        size="lg"
+        :loading="loading"
+        color="primary"
+        @click="update()"
+      >
+        {{ t('actions.update') }}
+      </RuiButton>
+    </div>
+  </div>
+
+  <FloatingNotification
+    type="success"
+    closeable
+    :visible="done"
+    :timeout="3000"
+    @dismiss="done = false"
+  >
+    {{ t('notifications.changes_saved') }}
+  </FloatingNotification>
+</template>

packages/website/app/composables/account/use-account-api.ts

@@ -1,6 +1,6 @@
 import type { ComposerTranslation } from 'vue-i18n';
 import type { DeleteAccountPayload, PasswordChangePayload, ProfilePayload } from '~/types/account';
-import type { ActionResult } from '~/types/common';
+import type { ActionResult, ProfileUpdateResult } from '~/types/common';
 import { type Account, AccountSchema } from '@rotki/card-payment-common/schemas/account';
 import {
   type ActionResultResponse,
@@ -55,7 +55,7 @@ export function useAccountApi() {
   /**
    * Update user profile information
    */
-  const updateProfile = async (payload: ProfilePayload): Promise<ActionResult> => {
+  const updateProfile = async (payload: ProfilePayload): Promise<ProfileUpdateResult> => {
     try {
       const response = await fetchWithCsrf<UpdateProfileResponse>(
         '/webapi/account/',
@@ -74,7 +74,10 @@ export function useAccountApi() {
       }
       const { result } = parsed.data;
       if (result) {
-        return createSuccessResult();
+        return {
+          ...createSuccessResult(),
+          profile: result,
+        };
       }
 
       return {

packages/website/app/composables/account/use-profile-update.ts

@@ -1,4 +1,3 @@
-import type { Validation } from '@vuelidate/core';
 import type { ProfilePayload } from '~/types/account';
 import { objectOmit } from '@vueuse/core';
 import { get, set } from '@vueuse/shared';
@@ -9,6 +8,10 @@ import { useMainStore } from '~/store';
 
 type ProfileOmitFields = 'movedOffline';
 
+interface ProfileValidation {
+  $validate: () => Promise<boolean>;
+}
+
 export function useProfileUpdate() {
   const store = useMainStore();
   const { account } = storeToRefs(store);
@@ -25,7 +28,7 @@ export function useProfileUpdate() {
    * Update user profile with validated form data
    */
   const updateProfile = async <T extends Partial<ProfilePayload>>(
-    v$: Ref<Validation>,
+    v$: Ref<ProfileValidation>,
     state: T,
     omitFields: ProfileOmitFields[] = ['movedOffline'],
   ): Promise<boolean> => {
@@ -49,7 +52,12 @@ export function useProfileUpdate() {
 
     const result = await accountApi.updateProfile(payload);
 
-    if (result.success) {
+    if (result.success && result.profile) {
+      set(account, {
+        ...userAccount,
+        address: result.profile.address,
+        newsletterConsent: result.profile.newsletterConsent,
+      });
       requestRefresh();
     }
 

packages/website/app/layouts/account.vue

@@ -59,6 +59,10 @@ const tabs = computed<TabItem[]>(() => {
     label: t('account.tabs.account_details'),
     icon: 'lu-circle-user-round',
     to: '/home/account-details',
+  }, {
+    label: t('account.tabs.email_preferences'),
+    icon: 'lu-mail',
+    to: '/home/email-preferences',
   }, {
     label: t('account.tabs.customer_information'),
     icon: 'lu-info',

packages/website/app/pages/home/email-preferences.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import EmailPreferences from '~/components/account/home/EmailPreferences.vue';
+import { usePageSeoNoIndex } from '~/composables/use-page-seo';
+
+usePageSeoNoIndex('Email Preferences');
+
+definePageMeta({
+  auth: true,
+  layout: 'account',
+});
+</script>
+
+<template>
+  <EmailPreferences />
+</template>

packages/website/app/types/account.ts

@@ -19,6 +19,7 @@ export interface ProfilePayload {
   readonly city?: string;
   readonly postcode?: string;
   readonly country?: string;
+  readonly newsletterConsent?: boolean;
 }
 
 export interface DeleteAccountPayload {

packages/website/app/types/common.ts

@@ -1,10 +1,14 @@
-import type { ApiError } from '~/types/index';
+import type { ApiError, UpdateProfile } from '~/types/index';
 
 export interface ActionResult {
   readonly success: boolean;
   readonly message?: ApiError;
 }
 
+export interface ProfileUpdateResult extends ActionResult {
+  readonly profile?: UpdateProfile;
+}
+
 export interface PayEvent {
   planId: number;
   paymentMethodNonce: string;

packages/website/app/types/index.ts

@@ -61,8 +61,11 @@ export type ChangePasswordResponse = z.infer<typeof ChangePasswordResponse>;
 
 const UpdateProfile = z.object({
   address: AddressSchema,
+  newsletterConsent: z.boolean(),
 });
 
+export type UpdateProfile = z.infer<typeof UpdateProfile>;
+
 export const UpdateProfileResponse = z.object({
   message: ApiError.optional(),
   result: UpdateProfile.optional(),

packages/website/i18n/locales/en.json

@@ -220,6 +220,7 @@
       "address": "Address",
       "customer_information": "Customer Information",
       "devices": "Devices List",
+      "email_preferences": "Email Preferences",
       "subscription": "Subscription",
       "payment_methods": "Saved Cards"
     },
@@ -242,6 +243,11 @@
     "check_email": "To change your email, please contact our support tem via",
     "title": "Details"
   },
+  "email_preferences": {
+    "description": "Choose whether you receive optional emails from rotki.",
+    "newsletter": "Send me product updates and news from rotki.",
+    "title": "Email Preferences"
+  },
   "actions": {
     "add_card": "Add card",
     "apply": "Apply",

packages/website/tests/e2e/specs/pages/payment-redirect.spec.ts

@@ -18,6 +18,7 @@ const mockAuthenticatedAccount = {
     email: 'test@example.com',
     email_confirmed: true,
     has_active_subscription: false,
+    newsletter_consent: false,
     can_use_premium: false,
     api_key: '',
     api_secret: '',

packages/website/tests/unit/components/account/home/AccountInformation.spec.ts

@@ -0,0 +1,83 @@
+import type { Account } from '@rotki/card-payment-common/schemas/account';
+import { mountSuspended } from '@nuxt/test-utils/runtime';
+import { describe, expect, it, vi } from 'vitest';
+import { computed, ref } from 'vue';
+import AccountInformation from '~/components/account/home/AccountInformation.vue';
+
+const mockUseProfileUpdate = vi.hoisted(() => vi.fn());
+
+vi.mock('~/composables/account/use-profile-update', () => ({
+  useProfileUpdate: mockUseProfileUpdate,
+}));
+
+function createAccount(newsletterConsent: boolean): Account {
+  return {
+    address: {
+      address1: 'First street',
+      address2: 'Second street',
+      city: 'Berlin',
+      companyName: 'rotki',
+      country: 'DE',
+      firstName: 'Alice',
+      lastName: 'Example',
+      movedOffline: false,
+      postcode: '10115',
+      vatId: 'DE123456789',
+    },
+    apiKey: 'api-key',
+    apiSecret: 'api-secret',
+    canUsePremium: true,
+    dateNow: '2026-07-17',
+    email: 'alice@example.com',
+    emailConfirmed: true,
+    hasActiveSubscription: true,
+    newsletterConsent,
+    username: 'alice',
+    vat: 19,
+    vatIdStatus: 'Valid',
+  };
+}
+
+async function mountAccountInformation(newsletterConsent: boolean) {
+  const updateProfile = vi.fn().mockResolvedValue(true);
+  const account = ref<Account>(createAccount(newsletterConsent));
+
+  mockUseProfileUpdate.mockReturnValue({
+    $externalResults: ref<Record<string, string[]>>({}),
+    account,
+    done: ref<boolean>(false),
+    loading: ref<boolean>(false),
+    movedOffline: computed<boolean>(() => false),
+    updateProfile,
+  });
+
+  const wrapper = await mountSuspended(AccountInformation, {
+    global: {
+      stubs: {
+        FloatingNotification: true,
+      },
+    },
+  });
+
+  return { updateProfile, wrapper };
+}
+
+describe('account information', () => {
+  it('continues to submit the existing customer information fields', async () => {
+    const { updateProfile, wrapper } = await mountAccountInformation(false);
+    await wrapper.get('[data-cy="update-profile"]').trigger('click');
+
+    await vi.waitFor(() => {
+      expect(updateProfile).toHaveBeenCalledOnce();
+    });
+    expect(updateProfile).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        companyName: 'rotki',
+        firstName: 'Alice',
+        lastName: 'Example',
+        vatId: 'DE123456789',
+      }),
+    );
+  });
+});