feat: gdpr compliance

packages/shared/src/components/Pixels.tsx

@@ -6,6 +6,8 @@ import { isProduction } from '../lib/constants';
 import type { UserExperienceLevel } from '../lib/user';
 import { useAuthContext } from '../contexts/AuthContext';
 import { fromCDN } from '../lib';
+import { GdprConsentKey } from '../hooks/useCookieBanner';
+import { useConsentCookie } from '../hooks/useCookieConsent';
 
 const FB_PIXEL_ID = '519268979315924';
 const GA_TRACKING_ID = 'G-VTGLXD7QSN';
@@ -196,15 +198,23 @@ export const logPixelPayment = (
 };
 
 export const Pixels = ({ hotjarId }: Partial<HotjarProps>): ReactElement => {
-  const { user, anonymous } = useAuthContext();
+  const { cookieExists: acceptedMarketing } = useConsentCookie(
+    GdprConsentKey.Marketing,
+  );
+  const { user, anonymous, isAuthReady, isGdprCovered } = useAuthContext();
   const userId = user?.id || anonymous?.id;
 
   const { query } = useRouter();
   const instanceId = query?.aiid?.toString();
 
   const props: PixelProps = { userId, instanceId };
 
-  if (!isProduction || !userId) {
+  if (
+    !isProduction ||
+    !userId ||
+    !isAuthReady ||
+    (isGdprCovered && !acceptedMarketing)
+  ) {
     return null;
   }
 

packages/shared/src/components/ProfileMenu.tsx

@@ -13,6 +13,7 @@ import {
   PauseIcon,
   EditIcon,
   DevPlusIcon,
+  PrivacyIcon,
 } from './icons';
 import InteractivePopup, {
   InteractivePopupPosition,
@@ -50,7 +51,7 @@ export default function ProfileMenu({
   onClose,
 }: ProfileMenuProps): ReactElement {
   const { openModal } = useLazyModal();
-  const { user, logout } = useAuthContext();
+  const { user, logout, isGdprCovered } = useAuthContext();
   const { isActive: isDndActive, setShowDnd } = useDndContext();
   const { showPlusSubscription, isPlus, logSubscriptionEvent } =
     usePlusSubscription();
@@ -142,6 +143,17 @@ export default function ProfileMenu({
       },
     });
 
+    if (isGdprCovered) {
+      list.push({
+        title: 'Privacy',
+        buttonProps: {
+          tag: 'a',
+          icon: <PrivacyIcon />,
+          href: `${webappUrl}account/privacy`,
+        },
+      });
+    }
+
     list.push({
       title: 'Logout',
       buttonProps: {
@@ -152,6 +164,7 @@ export default function ProfileMenu({
 
     return list.filter(Boolean);
   }, [
+    isGdprCovered,
     isDndActive,
     isPlus,
     logSubscriptionEvent,

packages/shared/src/components/accordion/index.tsx

@@ -0,0 +1,44 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { ArrowIcon } from '../icons';
+
+interface AccordionProps {
+  title: ReactNode;
+  children: ReactNode;
+}
+
+export function Accordion({ title, children }: AccordionProps): ReactElement {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex w-full flex-col">
+      <span className="flex w-full flex-row">
+        {title}
+        <div className="flex flex-1" />
+        <Button
+          type="button"
+          icon={
+            <ArrowIcon
+              className={classNames('transition-transform ease-in-out', {
+                'rotate-180': !isOpen,
+              })}
+            />
+          }
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Tertiary}
+          onClick={() => setIsOpen(!isOpen)}
+        />
+      </span>
+      <div
+        className={classNames(
+          'flex h-full min-h-0 w-full flex-col overflow-y-hidden break-words transition-[max-height,margin] duration-300 ease-in-out',
+          isOpen ? 'mt-3 max-h-full' : 'max-h-0',
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

packages/shared/src/components/icons/Privacy/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const PrivacyIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/index.ts

@@ -129,3 +129,4 @@ export * from './ShieldWarning';
 export * from './ShieldPlus';
 export * from './Sidebar';
 export * from './Folder';
+export * from './Privacy';

packages/shared/src/components/modals/SharedBookmarksModal.spec.tsx

@@ -6,7 +6,7 @@ import {
   screen,
   waitFor,
 } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import React from 'react';
 import nock from 'nock';
 import SharedBookmarksModal from './SharedBookmarksModal';
@@ -17,6 +17,7 @@ import {
   BOOKMARK_SHARING_QUERY,
 } from '../../graphql/bookmarksSharing';
 import { waitForNock } from '../../../__tests__/helpers/utilities';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
 
 const onRequestClose = jest.fn();
 
@@ -37,13 +38,13 @@ const renderComponent = (mocks: MockedGraphQLResponse[] = []): RenderResult => {
 
   mocks.forEach(mockGraphQL);
   return render(
-    <QueryClientProvider client={client}>
+    <TestBootProvider client={client}>
       <SharedBookmarksModal
         isOpen
         onRequestClose={onRequestClose}
         ariaHideApp={false}
       />
-    </QueryClientProvider>,
+    </TestBootProvider>,
   );
 };
 

packages/shared/src/components/modals/SubmitArticleModal.spec.tsx

@@ -1,10 +1,9 @@
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import React from 'react';
 import nock from 'nock';
-import { AuthContextProvider } from '../../contexts/AuthContext';
 import type { AnonymousUser, LoggedUser } from '../../lib/user';
 import type { MockedGraphQLResponse } from '../../../__tests__/helpers/graphql';
 import { mockGraphQL } from '../../../__tests__/helpers/graphql';
@@ -17,6 +16,7 @@ import user from '../../../__tests__/fixture/loggedUser';
 import { NotificationsContextProvider } from '../../contexts/NotificationsContext';
 import { waitForNock } from '../../../__tests__/helpers/utilities';
 import Toast from '../notifications/Toast';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
 
 const onRequestClose = jest.fn();
 
@@ -43,21 +43,22 @@ const renderComponent = (
   const client = new QueryClient();
   mocks.forEach(mockGraphQL);
   return render(
-    <QueryClientProvider client={client}>
-      <AuthContextProvider
-        user={userUpdate}
-        updateUser={jest.fn()}
-        tokenRefreshed
-        getRedirectUri={jest.fn()}
-        loadingUser={false}
-        loadedUserFromCache
-      >
-        <NotificationsContextProvider>
-          <Toast />
-          <SubmitArticleModal isOpen onRequestClose={onRequestClose} />
-        </NotificationsContextProvider>
-      </AuthContextProvider>
-    </QueryClientProvider>,
+    <TestBootProvider
+      client={client}
+      auth={{
+        user: userUpdate,
+        updateUser: jest.fn(),
+        tokenRefreshed: true,
+        getRedirectUri: jest.fn(),
+        loadingUser: false,
+        loadedUserFromCache: true,
+      }}
+    >
+      <NotificationsContextProvider>
+        <Toast />
+        <SubmitArticleModal isOpen onRequestClose={onRequestClose} />
+      </NotificationsContextProvider>
+    </TestBootProvider>,
   );
 };
 

packages/shared/src/components/modals/common.tsx

@@ -214,6 +214,13 @@ const AddToCustomFeedModal = dynamic(
     ),
 );
 
+const CookieConsentModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "cookieConsentModal" */ './user/CookieConsentModal'
+    ),
+);
+
 const ReportUserModal = dynamic(
   () =>
     import(
@@ -257,6 +264,7 @@ export const modals = {
   [LazyModal.ClickbaitShield]: ClickbaitShieldModal,
   [LazyModal.MoveBookmark]: MoveBookmarkModal,
   [LazyModal.AddToCustomFeed]: AddToCustomFeedModal,
+  [LazyModal.CookieConsent]: CookieConsentModal,
   [LazyModal.ReportUser]: ReportUserModal,
 };
 

packages/shared/src/components/modals/common/types.ts

@@ -60,6 +60,7 @@ export enum LazyModal {
   ClickbaitShield = 'clickbaitShield',
   MoveBookmark = 'moveBookmark',
   AddToCustomFeed = 'addToCustomFeed',
+  CookieConsent = 'cookieConsent',
   ReportUser = 'reportUser',
 }
 

packages/shared/src/components/modals/user/CookieConsentItem.tsx

@@ -0,0 +1,76 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { Switch } from '../../fields/Switch';
+import type { GdprConsentKey } from '../../../hooks/useCookieBanner';
+import { gdprConsentSettings } from '../../../hooks/useCookieBanner';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '../../typography/Typography';
+import { Accordion } from '../../accordion';
+import { getCookies } from '../../../lib/cookie';
+
+interface CookieConsentItemProps {
+  consent: GdprConsentKey;
+  onToggle?: (value: boolean) => void;
+}
+
+const getCookie = (key: GdprConsentKey) => {
+  const cookies = getCookies([key]);
+  const disabled = globalThis?.localStorage.getItem(key);
+
+  return !!cookies[key] || !disabled;
+};
+
+export function CookieConsentItem({
+  consent,
+  onToggle,
+}: CookieConsentItemProps): ReactElement {
+  const { title, description, isAlwaysOn } = gdprConsentSettings[consent];
+  const [isChecked, setIsChecked] = useState<boolean>(
+    isAlwaysOn ?? getCookie(consent),
+  );
+
+  if (!gdprConsentSettings[consent]) {
+    return null;
+  }
+
+  const onToggleSwitch = () => {
+    if (isAlwaysOn) {
+      return;
+    }
+
+    const value = !isChecked;
+
+    setIsChecked(value);
+
+    if (onToggle) {
+      onToggle(value);
+    }
+  };
+
+  return (
+    <Accordion
+      key={consent}
+      title={
+        <Switch
+          disabled={isAlwaysOn}
+          name={consent}
+          inputId={consent}
+          checked={isChecked}
+          onToggle={onToggleSwitch}
+        >
+          {title}
+        </Switch>
+      }
+    >
+      <Typography
+        type={TypographyType.Callout}
+        color={TypographyColor.Tertiary}
+      >
+        {description}
+      </Typography>
+    </Accordion>
+  );
+}