feat: #7608 add do not track banner app market (#7652)

* feat: #7608 add do not track banner app market

* feat: #7608 tweak regex

packages/app-market/src/components/settings/__tests__/__snapshots__/settings-profile.test.tsx.snap

@@ -101,7 +101,9 @@ Object {
       >
         Update Your Password
       </h2>
-      <form>
+      <form
+        class="el-mb11"
+      >
         <div
           class="el-form-layout-has-margin el-form-layout"
         >
@@ -181,6 +183,45 @@ Object {
           </div>
         </div>
       </form>
+      <h2
+        class="el-has-bold-text el-subtitle"
+      >
+        Update Tracking Consent
+      </h2>
+      <p
+        class="el-has-grey-text el-body-text"
+      >
+        The App Market users mechanisms to track your use of the environment to provide an enhanced user experience and provide feedback to enable Reapit to improve the product. You can update your preferences below.
+      </p>
+      <div
+        class="el-form-layout"
+      >
+        <div
+          class="el-input-wrap"
+        >
+          <input
+            checked=""
+            class="el-toggle-checkbox"
+            id="tracking-consent"
+            type="checkbox"
+          />
+          <label
+            class="el-has-grey-bg el-toggle-label"
+            for="tracking-consent"
+          >
+            <span
+              class="el-toggle-item"
+            >
+              Consent
+            </span>
+            <span
+              class="el-toggle-item"
+            >
+              Deny
+            </span>
+          </label>
+        </div>
+      </div>
     </div>
   </body>,
   "container": <div>
@@ -280,7 +321,9 @@ Object {
     >
       Update Your Password
     </h2>
-    <form>
+    <form
+      class="el-mb11"
+    >
       <div
         class="el-form-layout-has-margin el-form-layout"
       >
@@ -360,6 +403,45 @@ Object {
         </div>
       </div>
     </form>
+    <h2
+      class="el-has-bold-text el-subtitle"
+    >
+      Update Tracking Consent
+    </h2>
+    <p
+      class="el-has-grey-text el-body-text"
+    >
+      The App Market users mechanisms to track your use of the environment to provide an enhanced user experience and provide feedback to enable Reapit to improve the product. You can update your preferences below.
+    </p>
+    <div
+      class="el-form-layout"
+    >
+      <div
+        class="el-input-wrap"
+      >
+        <input
+          checked=""
+          class="el-toggle-checkbox"
+          id="tracking-consent"
+          type="checkbox"
+        />
+        <label
+          class="el-has-grey-bg el-toggle-label"
+          for="tracking-consent"
+        >
+          <span
+            class="el-toggle-item"
+          >
+            Consent
+          </span>
+          <span
+            class="el-toggle-item"
+          >
+            Deny
+          </span>
+        </label>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -529,7 +611,9 @@ Object {
       >
         Update Your Password
       </h2>
-      <form>
+      <form
+        class="el-mb11"
+      >
         <div
           class="el-form-layout-has-margin el-form-layout"
         >
@@ -609,6 +693,45 @@ Object {
           </div>
         </div>
       </form>
+      <h2
+        class="el-has-bold-text el-subtitle"
+      >
+        Update Tracking Consent
+      </h2>
+      <p
+        class="el-has-grey-text el-body-text"
+      >
+        The App Market users mechanisms to track your use of the environment to provide an enhanced user experience and provide feedback to enable Reapit to improve the product. You can update your preferences below.
+      </p>
+      <div
+        class="el-form-layout"
+      >
+        <div
+          class="el-input-wrap"
+        >
+          <input
+            checked=""
+            class="el-toggle-checkbox"
+            id="tracking-consent"
+            type="checkbox"
+          />
+          <label
+            class="el-has-grey-bg el-toggle-label"
+            for="tracking-consent"
+          >
+            <span
+              class="el-toggle-item"
+            >
+              Consent
+            </span>
+            <span
+              class="el-toggle-item"
+            >
+              Deny
+            </span>
+          </label>
+        </div>
+      </div>
     </div>
   </body>,
   "container": <div>
@@ -721,7 +844,9 @@ Object {
     >
       Update Your Password
     </h2>
-    <form>
+    <form
+      class="el-mb11"
+    >
       <div
         class="el-form-layout-has-margin el-form-layout"
       >
@@ -801,6 +926,45 @@ Object {
         </div>
       </div>
     </form>
+    <h2
+      class="el-has-bold-text el-subtitle"
+    >
+      Update Tracking Consent
+    </h2>
+    <p
+      class="el-has-grey-text el-body-text"
+    >
+      The App Market users mechanisms to track your use of the environment to provide an enhanced user experience and provide feedback to enable Reapit to improve the product. You can update your preferences below.
+    </p>
+    <div
+      class="el-form-layout"
+    >
+      <div
+        class="el-input-wrap"
+      >
+        <input
+          checked=""
+          class="el-toggle-checkbox"
+          id="tracking-consent"
+          type="checkbox"
+        />
+        <label
+          class="el-has-grey-bg el-toggle-label"
+          for="tracking-consent"
+        >
+          <span
+            class="el-toggle-item"
+          >
+            Consent
+          </span>
+          <span
+            class="el-toggle-item"
+          >
+            Deny
+          </span>
+        </label>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],

packages/app-market/src/components/settings/__tests__/settings-profile.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react'
 import { render, setViewport } from '../../../tests/react-testing'
-import { SettingsProfile, handleChangePassword } from '../settings-profile'
+import { SettingsProfile, handleChangePassword, handleUserUpdate } from '../settings-profile'
 import { changePasswordService } from '../../../services/cognito-identity'
 import { UseSnack } from '@reapit/elements'
 import { TrackingEvent } from '../../../core/analytics-events'
 import { trackEvent } from '../../../core/analytics'
+import { mockUserModel } from '../../../tests/__stubs__/user'
+import { SendFunction } from '@reapit/utils-react'
+import { UpdateUserModel } from '@reapit/foundations-ts-definitions'
 
+jest.mock('../../../core/use-apps-browse-state')
 jest.mock('../../../core/analytics')
 jest.mock('../../../services/cognito-identity', () => ({
   changePasswordService: jest.fn(),
@@ -95,3 +99,17 @@ describe('handleChangePassword', () => {
     expect(snack.success).not.toHaveBeenCalled()
   })
 })
+
+describe('handleUserUpdate', () => {
+  it('should handle updating a user', async () => {
+    const updateUser = jest.fn(() => true) as unknown as SendFunction<UpdateUserModel, boolean>
+    const currentUserState = mockUserModel
+    const refreshCurrentUser = jest.fn()
+    const curried = handleUserUpdate(updateUser, currentUserState, refreshCurrentUser)
+
+    await curried()
+
+    expect(updateUser).toHaveBeenCalledWith({ ...mockUserModel, consentToTrack: false })
+    expect(refreshCurrentUser).toHaveBeenCalledTimes(1)
+  })
+})

packages/app-market/src/components/settings/settings-profile.tsx

@@ -5,13 +5,15 @@ import {
   ButtonGroup,
   Col,
   elMb11,
+  ElToggleItem,
   FlexContainer,
   FormLayout,
   Grid,
   InputGroup,
   InputWrap,
   Subtitle,
   Title,
+  Toggle,
   useMediaQuery,
   UseSnack,
   useSnack,
@@ -26,6 +28,10 @@ import { RolesChip } from './__styles__'
 import { handleLogout } from '.'
 import { trackEventHandler, trackEvent } from '../../core/analytics'
 import { TrackingEvent } from '../../core/analytics-events'
+import { UpdateUserModel, UserModel } from '@reapit/foundations-ts-definitions'
+import { updateActions, UpdateActionNames } from '@reapit/utils-common'
+import { SendFunction, useReapitUpdate } from '@reapit/utils-react'
+import { useAppsBrowseState } from '../../core/use-apps-browse-state'
 
 export type ChangePasswordFormValues = {
   password: string
@@ -50,11 +56,31 @@ export const handleChangePassword =
     }
   }
 
+export const handleUserUpdate =
+  (
+    updateUser: SendFunction<UpdateUserModel, boolean>,
+    currentUserState: UserModel | null,
+    refreshCurrentUser: () => void,
+  ) =>
+  async () => {
+    const userUpdate = await updateUser({
+      ...currentUserState,
+      name: currentUserState?.name ?? '',
+      consentToTrack: !currentUserState?.consentToTrack,
+    })
+
+    if (userUpdate) refreshCurrentUser()
+  }
+
 export const SettingsProfile: FC = () => {
+  const { currentUserState, refreshCurrentUser } = useAppsBrowseState()
   const { connectSession, connectLogoutRedirect } = useReapitConnect(reapitConnectBrowserSession)
   const snacks = useSnack()
   const { isMobile } = useMediaQuery()
   const loginIdentity = connectSession?.loginIdentity ?? ({} as LoginIdentity)
+  const email = connectSession?.loginIdentity.email ?? ''
+  const userId = email ? window.btoa(email).replace(/=/g, '') : null
+
   const {
     register,
     handleSubmit,
@@ -68,11 +94,25 @@ export const SettingsProfile: FC = () => {
     },
   })
 
+  const [, , updateUser] = useReapitUpdate<UpdateUserModel, boolean>({
+    reapitConnectBrowserSession,
+    action: updateActions(window.reapit.config.appEnv)[UpdateActionNames.updateUser],
+    method: 'PUT',
+    uriParams: {
+      userId,
+    },
+  })
+
   useEffect(trackEventHandler(TrackingEvent.LoadProfile, true), [])
 
   const logoutUser = useCallback(handleLogout(connectLogoutRedirect), [connectLogoutRedirect])
+  const userUpdate = useCallback(handleUserUpdate(updateUser, currentUserState, refreshCurrentUser), [
+    currentUserState,
+    updateUser,
+    refreshCurrentUser,
+  ])
 
-  const { name, email, orgName, clientId, groups } = loginIdentity
+  const { name, orgName, clientId, groups } = loginIdentity
 
   return (
     <>
@@ -130,7 +170,7 @@ export const SettingsProfile: FC = () => {
         )}
       </Grid>
       <Subtitle hasBoldText>Update Your Password</Subtitle>
-      <form onSubmit={handleSubmit(handleChangePassword(email, snacks))}>
+      <form className={elMb11} onSubmit={handleSubmit(handleChangePassword(email, snacks))}>
         <FormLayout hasMargin>
           <InputWrap>
             <InputGroup
@@ -169,6 +209,26 @@ export const SettingsProfile: FC = () => {
           </Button>
         </ButtonGroup>
       </form>
+      <Subtitle hasBoldText>Update Tracking Consent</Subtitle>
+      <BodyText hasGreyText>
+        The App Market users mechanisms to track your use of the environment to provide an enhanced user experience and
+        provide feedback to enable Reapit to improve the product. You can update your preferences below.
+      </BodyText>
+      {currentUserState && (
+        <FormLayout>
+          <InputWrap>
+            <Toggle
+              onChange={userUpdate}
+              defaultChecked={currentUserState?.consentToTrack}
+              id="tracking-consent"
+              hasGreyBg
+            >
+              <ElToggleItem>Consent</ElToggleItem>
+              <ElToggleItem>Deny</ElToggleItem>
+            </Toggle>
+          </InputWrap>
+        </FormLayout>
+      )}
     </>
   )
 }

packages/app-market/src/core/__mocks__/use-apps-browse-state.tsx

@@ -1,11 +1,14 @@
 import { mockCategoryModelPagedResult } from '../../tests/__stubs__/categories'
+import { mockUserModel } from '../../tests/__stubs__/user'
 import { appsBrowseConfigCollection } from '../config'
 
 export const mockAppsBrowseState = {
   appsBrowseDataState: {},
   appsBrowseFilterState: null,
   appsBrowseConfigState: appsBrowseConfigCollection,
   appsBrowseCategoriesState: mockCategoryModelPagedResult,
+  currentUserState: mockUserModel,
+  refreshCurrentUser: jest.fn(),
   setAppsBrowseFilterState: jest.fn(),
 }