feat: update MemberScreen to udpate enableSaveActions in member (#186)

* feat: update MemberScreen to udpate enableSaveActions in member instead of extra

* feat(test): add tests to check the enable analytics switch

* feat: fix typo and upgrade dependencies

* feat: upgrade SDK to 4.7.1 and query-client to 3.4.1

* fix: remove disabled enable analytics button

cypress/e2e/profile.cy.ts

@@ -1,11 +1,48 @@
 import {
+  MEMBER_PROFILE_ANALYTICS_SWITCH_ID,
   USERNAME_CANCEL_BUTTON_ID,
   USERNAME_DISPLAY_ID,
   USERNAME_EDIT_BUTTON_ID,
   USERNAME_SAVE_BUTTON_ID,
 } from '@/config/selectors';
 
-import { BOB, MEMBERS } from '../fixtures/members';
+import { BOB, CURRENT_MEMBER, MEMBERS } from '../fixtures/members';
+import { mockGetCurrentMember } from '../support/server';
+import { buildDataCySelector } from '../support/utils';
+
+const currentMember = CURRENT_MEMBER;
+
+const expectEnableSaveActionsInRequestToBe = (enableSaveActions: boolean) =>
+  cy
+    .wait('@editMember')
+    .its('request.body.enableSaveActions')
+    .should('eq', enableSaveActions);
+
+const expectEnableSaveActionsInResponseToBe = (enableSaveActions: boolean) =>
+  cy
+    .wait('@getCurrentMember')
+    .its('response.body.enableSaveActions')
+    .should('eq', enableSaveActions);
+
+const expectAnalyticsSwitchToBe = (enabled: boolean) =>
+  cy
+    .get(buildDataCySelector(MEMBER_PROFILE_ANALYTICS_SWITCH_ID, 'input'))
+    .should(`${enabled ? '' : 'not.'}be.checked`);
+
+const clickOnAnalyticsSwitch = () =>
+  cy
+    .get(buildDataCySelector(MEMBER_PROFILE_ANALYTICS_SWITCH_ID, 'input'))
+    .click();
+
+const checkAnalyticsAfterUpdate = (shouldSaveActionsBeEnabled: boolean) => {
+  const enableSaveActions = shouldSaveActionsBeEnabled;
+  mockGetCurrentMember({ ...currentMember, enableSaveActions });
+  clickOnAnalyticsSwitch();
+  expectEnableSaveActionsInRequestToBe(enableSaveActions);
+  expectAnalyticsSwitchToBe(enableSaveActions);
+  expectEnableSaveActionsInResponseToBe(enableSaveActions);
+  expectAnalyticsSwitchToBe(enableSaveActions);
+};
 
 const changeUsername = (newUserName: string) => {
   cy.get(`#${USERNAME_EDIT_BUTTON_ID}`).click();
@@ -66,3 +103,50 @@ describe('Change username', () => {
     });
   });
 });
+
+describe('Checks the analytics switch', () => {
+
+  describe('enableSaveActions is enabled', () => {
+    beforeEach(() => {
+      cy.setUpApi({
+        currentMember: {
+          ...currentMember,
+          enableSaveActions: true,
+        },
+      });
+      cy.visit('/');
+      // wait on current member request to update then the mock response for current member
+      cy.wait('@getCurrentMember');
+    });
+
+    it('Analytics switch should be enabled', () => {
+      expectAnalyticsSwitchToBe(true);
+    });
+
+    it('Disable analytics switch', () => {
+      checkAnalyticsAfterUpdate(false);
+    });
+  });
+
+  describe('enableSaveActions is disabled', () => {
+    beforeEach(() => {
+      cy.setUpApi({
+        currentMember: {
+          ...currentMember,
+          enableSaveActions: false,
+        },
+      });
+      cy.visit('/');
+      // wait on current member request to update then the mock response for current member
+      cy.wait('@getCurrentMember');
+    });
+
+    it('Analytics switch should be enabled', () => {
+      expectAnalyticsSwitchToBe(false);
+    });
+
+    it('Disable analytics switch', () => {
+      checkAnalyticsAfterUpdate(true);
+    });
+  });
+});

cypress/support/utils.ts

@@ -4,3 +4,8 @@ export const ID_FORMAT = '(?=.*[0-9])(?=.*[a-zA-Z])([a-z0-9-]+)';
 
 // TODO: not ideal, to change?
 export type MemberForTest = CompleteMember & { thumbnails?: string };
+export const getDataCy = (dataCy: string): string => `[data-cy="${dataCy}"]`;
+export const buildDataCySelector = (
+  dataCy: string,
+  htmlSelector: string,
+): string => `${getDataCy(dataCy)} ${htmlSelector}`;

package.json

@@ -14,8 +14,8 @@
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "3.2.1",
-    "@graasp/sdk": "4.5.0",
+    "@graasp/query-client": "3.4.1",
+    "@graasp/sdk": "4.7.1",
     "@graasp/translations": "1.25.3",
     "@graasp/ui": "4.15.0",
     "@mui/icons-material": "5.15.14",

src/config/constants.ts

@@ -10,6 +10,7 @@ export const HEADER_HEIGHT = 64;
 export const LEFT_MENU_WIDTH = 250;
 
 export const DEFAULT_EMAIL_FREQUENCY = EmailFrequency.Always;
+export const DEFAULT_CURRENCY = 'chf';
 
 export const emailFrequency = {
   [EmailFrequency.Always]: 'ALWAYS_RECEIVE_EMAILS',

src/config/selectors.ts

@@ -8,6 +8,8 @@ export const MEMBER_PROFILE_INSCRIPTION_DATE_ID =
 export const MEMBER_PROFILE_LANGUAGE_SWITCH_ID = 'memberProfileLanguageSwitch';
 export const MEMBER_PROFILE_MEMBER_ID_COPY_BUTTON_ID =
   'memberProfileMemberIdCopyButton';
+export const MEMBER_PROFILE_ANALYTICS_SWITCH_ID =
+  'memberProfileAnalyticsSwitch';
 
 export const HEADER_APP_BAR_ID = 'headerAppBar';
 export const HEADER_USER_ID = 'headerUser';

src/langs/ar.json

@@ -14,7 +14,7 @@
   "MAIN_MENU_PUBLIC_PROFILE": "حساب عام",
   "MAIN_MENU_DESTRUCTIVE_SETTINGS": "الإعدادات المدمرة",
   "MAIN_MENU_STORAGE": "تخزين",
-  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "قريباً!",
+  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "نجمع بيانات التحليلات لتحسين تجربة المستخدم أثناء تصفح Graasp.",
   "PROFILE_TITLE": "الملف الشخصي",
   "PROFILE_MEMBER_NAME": "اسم المستخدم",
   "PROFILE_MEMBER_ID_TITLE": "هوية المستخدم",

src/langs/de.json

@@ -14,7 +14,7 @@
   "MAIN_MENU_PUBLIC_PROFILE": "Öffentliches Profil",
   "MAIN_MENU_DESTRUCTIVE_SETTINGS": "Zerstörerische Einstellungen",
   "MAIN_MENU_STORAGE": "Speicher",
-  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Demnächst verfügbar!",
+  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Wir sammeln Analysedaten, um Ihre Benutzererfahrung beim Surfen auf Graasp zu verbessern.",
   "PROFILE_TITLE": "Profil",
   "PROFILE_MEMBER_NAME": "Nutzername",
   "PROFILE_MEMBER_ID_TITLE": "Benützer ID",

src/langs/en.json

@@ -14,7 +14,7 @@
   "MAIN_MENU_PUBLIC_PROFILE": "Public Profile",
   "MAIN_MENU_DESTRUCTIVE_SETTINGS": "Destructive Settings",
   "MAIN_MENU_STORAGE": "Storage",
-  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Coming soon!",
+  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "We collect analytics data to improve your user experience while browsing Graasp.",
   "PROFILE_TITLE": "Profile",
   "PROFILE_MEMBER_NAME": "Username",
   "PROFILE_MEMBER_ID_TITLE": "Member ID",

src/langs/es.json

@@ -14,7 +14,7 @@
   "MAIN_MENU_PUBLIC_PROFILE": "Perfil público",
   "MAIN_MENU_DESTRUCTIVE_SETTINGS": "Ajustes destructivos",
   "MAIN_MENU_STORAGE": "Almacenamiento",
-  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "¡Muy pronto!",
+  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Recopilamos datos analíticos para mejorar su experiencia de usuario mientras navega por Graasp.",
   "PROFILE_TITLE": "Perfil",
   "PROFILE_MEMBER_NAME": "Nombre de usuario",
   "PROFILE_MEMBER_ID_TITLE": "Identificación de miembro",

src/langs/fr.json

@@ -14,7 +14,7 @@
   "MAIN_MENU_PUBLIC_PROFILE": "Profil Public",
   "MAIN_MENU_DESTRUCTIVE_SETTINGS": "Paramètres Destructeurs",
   "MAIN_MENU_STORAGE": "Stockage",
-  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Prochainement !",
+  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Nous recueillons des données analytiques afin d'améliorer votre expérience utilisateur lorsque vous naviguez sur Graasp.",
   "PROFILE_TITLE": "Profil",
   "PROFILE_MEMBER_NAME": "Nom de l'utilisateur",
   "PROFILE_MEMBER_ID_TITLE": "Identifiant de l'utilisateur",

src/langs/it.json

@@ -14,7 +14,7 @@
   "MAIN_MENU_PUBLIC_PROFILE": "Profilo Pubblico",
   "MAIN_MENU_DESTRUCTIVE_SETTINGS": "Impostazioni Distruttive",
   "MAIN_MENU_STORAGE": "Archiviazione",
-  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "In arrivo prossimamente!",
+  "SAVE_ACTIONS_TOGGLE_TOOLTIP": "Raccogliamo dati analitici per migliorare l'esperienza dell'utente durante la navigazione su Graasp.",
   "PROFILE_TITLE": "Profilo",
   "PROFILE_MEMBER_NAME": "Nome utente",
   "PROFILE_MEMBER_ID_TITLE": "ID Membro",

src/pages/MemberScreen.tsx

@@ -24,11 +24,10 @@ import { useAccountTranslation } from '@/config/i18n';
 import notifier from '@/config/notifier';
 import { MANAGE_ACCOUNT_PATH } from '@/config/paths';
 import { hooks, mutations } from '@/config/queryClient';
+import { MEMBER_PROFILE_ANALYTICS_SWITCH_ID } from '@/config/selectors';
 import { COPY_MEMBER_ID_TO_CLIPBOARD } from '@/types/clipboard';
 import { copyToClipboard } from '@/utils/clipboard';
 
-const DEFAULT_MEMBER_PROFILE_SAVE_ACTIONS_SETTING = true;
-
 const MemberProfileScreen = (): JSX.Element | null => {
   const { t, i18n } = useAccountTranslation();
   const { t: translateAccount } = useAccountTranslation();
@@ -50,9 +49,7 @@ const MemberProfileScreen = (): JSX.Element | null => {
     const handleOnToggle = (event: { target: { checked: boolean } }): void => {
       editMember({
         id: member.id,
-        extra: {
-          enableSaveActions: event.target.checked,
-        },
+        enableSaveActions: event.target.checked,
       });
     };
 
@@ -132,17 +129,12 @@ const MemberProfileScreen = (): JSX.Element | null => {
             </Grid>
             <Grid item xs={8}>
               <Tooltip title={translateAccount('SAVE_ACTIONS_TOGGLE_TOOLTIP')}>
-                <span>
-                  <Switch
-                    onChange={handleOnToggle}
-                    checked={
-                      member.extra?.enableSaveActions ??
-                      DEFAULT_MEMBER_PROFILE_SAVE_ACTIONS_SETTING
-                    }
-                    color="primary"
-                    disabled
-                  />
-                </span>
+                <Switch
+                  data-cy={MEMBER_PROFILE_ANALYTICS_SWITCH_ID}
+                  onChange={handleOnToggle}
+                  checked={member.enableSaveActions}
+                  color="primary"
+                />
               </Tooltip>
             </Grid>
           </Grid>

yarn.lock

@@ -1608,9 +1608,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/query-client@npm:3.2.1":
-  version: 3.2.1
-  resolution: "@graasp/query-client@npm:3.2.1"
+"@graasp/query-client@npm:3.4.1":
+  version: 3.4.1
+  resolution: "@graasp/query-client@npm:3.4.1"
   dependencies:
     "@tanstack/react-query": "npm:4.36.1"
     "@tanstack/react-query-devtools": "npm:4.36.1"
@@ -1621,21 +1621,21 @@ __metadata:
     "@graasp/sdk": ^4.0.0
     "@graasp/translations": ^1.23.0
     react: ^18.0.0
-  checksum: 10/2859404e6bf8dd18b119b4617e5e76dfe949386bf14add4978943f60b1338c1b17850252b30bbed57a856f153097f952fcb1527160ef5121af9af1706a0b26b3
+  checksum: 10/c5858ed3071ffd5688510b71e298ab787a47586f0f178a3d150aa2db94e71dd99510fb4c91d345f3b818e6dce3de23b57fa5aa9e3b17c2853382a572f617e5c4
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:4.5.0":
-  version: 4.5.0
-  resolution: "@graasp/sdk@npm:4.5.0"
+"@graasp/sdk@npm:4.7.1":
+  version: 4.7.1
+  resolution: "@graasp/sdk@npm:4.7.1"
   dependencies:
     "@faker-js/faker": "npm:8.4.1"
     js-cookie: "npm:3.0.5"
     validator: "npm:13.11.0"
   peerDependencies:
     date-fns: ^3
     uuid: ^9
-  checksum: 10/835e7613126e3fb7e0d6175c4df30f75812b578ad7a5299d538c64259ee56aec2be4a0a967ebb88162d5ddd800fd999525db747d677b8b8daa6bd5b09e60d166
+  checksum: 10/182e2a33fbdf7ed2cac7fbdf5a01378a059415a753345cca501d2ddda4985b9448c81bb2931a7157dc34cd613412c5da42da38cb037e9a46438755707e4ea2aa
   languageName: node
   linkType: hard
 
@@ -7057,8 +7057,8 @@ __metadata:
     "@emotion/cache": "npm:11.11.0"
     "@emotion/react": "npm:11.11.4"
     "@emotion/styled": "npm:11.11.0"
-    "@graasp/query-client": "npm:3.2.1"
-    "@graasp/sdk": "npm:4.5.0"
+    "@graasp/query-client": "npm:3.4.1"
+    "@graasp/sdk": "npm:4.7.1"
     "@graasp/translations": "npm:1.25.3"
     "@graasp/ui": "npm:4.15.0"
     "@mui/icons-material": "npm:5.15.14"