From 9915acbebb1c1399cbf542a7329833c25d07e0d2 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 30 Jul 2021 14:18:51 +0200
Subject: [PATCH 01/28] feat(videodetail): implement conditional startwatching
 button + label

---
 src/components/Video/Video.test.tsx           |   4 +-
 src/components/Video/Video.tsx                |  14 +-
 .../Video/__snapshots__/Video.test.tsx.snap   |   2 +-
 src/components/Welcome/Welcome.tsx            |  11 +-
 src/i18n/locales/en_US/video.json             |   3 +
 src/i18n/locales/nl_NL/video.json             |   3 +
 src/screens/Movie/Movie.tsx                   | 118 ++++++++++-----
 src/screens/Series/Series.tsx                 | 140 ++++++++++++------
 src/utils/cleeng.ts                           |   7 +
 types/playlist.d.ts                           |   1 +
 10 files changed, 207 insertions(+), 96 deletions(-)
 create mode 100644 src/utils/cleeng.ts

diff --git a/src/components/Video/Video.test.tsx b/src/components/Video/Video.test.tsx
index c988fc065..1c75d4aa3 100644
--- a/src/components/Video/Video.test.tsx
+++ b/src/components/Video/Video.test.tsx
@@ -28,7 +28,9 @@ describe('<Video>', () => {
         title="Test video"
         play
         item={item}
-        startPlay={jest.fn()}
+        allowedToWatch={true}
+        startWatchingLabel="Start watching"
+        onStartWatchingClick={jest.fn()}
         goBack={jest.fn()}
         poster="fading"
         hasShared={false}
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
index c03d60dc1..c900f6b24 100644
--- a/src/components/Video/Video.tsx
+++ b/src/components/Video/Video.tsx
@@ -30,8 +30,10 @@ type Props = {
   feedId?: string;
   trailerItem?: PlaylistItem;
   play: boolean;
+  allowedToWatch: boolean;
+  startWatchingLabel: string;
   progress?: number;
-  startPlay: () => void;
+  onStartWatchingClick: () => void;
   goBack: () => void;
   onComplete?: () => void;
   isFavorited: boolean;
@@ -54,7 +56,9 @@ const Video: React.FC<Props> = ({
   feedId,
   trailerItem,
   play,
-  startPlay,
+  allowedToWatch,
+  startWatchingLabel,
+  onStartWatchingClick,
   progress,
   goBack,
   onComplete,
@@ -128,9 +132,9 @@ const Video: React.FC<Props> = ({
               color="primary"
               variant="contained"
               size="large"
-              label={typeof progress === 'number' ? t('video:continue_watching') : t('video:start_watching')}
-              startIcon={<Play />}
-              onClick={startPlay}
+              label={startWatchingLabel}
+              startIcon={allowedToWatch ? <Play /> : undefined}
+              onClick={onStartWatchingClick}
               active={play}
               fullWidth={breakpoint < Breakpoint.md}
             >
diff --git a/src/components/Video/__snapshots__/Video.test.tsx.snap b/src/components/Video/__snapshots__/Video.test.tsx.snap
index 447bcb2cb..8e626df62 100644
--- a/src/components/Video/__snapshots__/Video.test.tsx.snap
+++ b/src/components/Video/__snapshots__/Video.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`<Video> renders and matches snapshot 1`] = `
               </svg>
             </div>
             <span>
-              video:start_watching
+              Start watching
             </span>
           </button>
           <button
diff --git a/src/components/Welcome/Welcome.tsx b/src/components/Welcome/Welcome.tsx
index 8228a11ca..102307eb6 100644
--- a/src/components/Welcome/Welcome.tsx
+++ b/src/components/Welcome/Welcome.tsx
@@ -14,14 +14,21 @@ type Props = {
 
 const Welcome: React.FC<Props> = ({ onCloseButtonClick, onCountdownCompleted }) => {
   const { t } = useTranslation('account');
-  const config = ConfigStore.useState(s => s.config);
+  const config = ConfigStore.useState((s) => s.config);
   const countdown = useCountdown(10, 1, onCountdownCompleted);
 
   return (
     <div className={styles.welcome}>
       <h2>{t('checkout.welcome_title', { siteName: config.siteName })}</h2>
       <p>{t('checkout.welcome_description', { siteName: config.siteName })}</p>
-      <Button variant="contained" color="primary" label={t('checkout.start_watching', { countdown })} onClick={onCloseButtonClick} size="large" fullWidth />
+      <Button
+        variant="contained"
+        color="primary"
+        label={t('checkout.start_watching', { countdown })}
+        onClick={onCloseButtonClick}
+        size="large"
+        fullWidth
+      />
     </div>
   );
 };
diff --git a/src/i18n/locales/en_US/video.json b/src/i18n/locales/en_US/video.json
index 32e8860e9..04269e817 100644
--- a/src/i18n/locales/en_US/video.json
+++ b/src/i18n/locales/en_US/video.json
@@ -1,6 +1,7 @@
 {
   "add_to_favorites": "Add to favorites",
   "all_seasons": "All seasons",
+  "complete_your_subscription": "Complete your subscription",
   "continue_watching": "Continue watching",
   "copied_url": "Copied url",
   "current_episode": "Current episode",
@@ -8,8 +9,10 @@
   "episodes": "Episodes",
   "favorite": "Favorite",
   "remove_from_favorites": "Remove from favorites",
+  "renew_your_subscription": "Renew your subscription",
   "season_prefix": "Season ",
   "share": "Share",
+  "sign_up_to_start_watching": "Sign up to start watching!",
   "start_watching": "Start watching",
   "total_episodes": "{{ count }} episode",
   "total_episodes_plural": "{{ count }} episodes",
diff --git a/src/i18n/locales/nl_NL/video.json b/src/i18n/locales/nl_NL/video.json
index 0aba25f89..8ec851773 100644
--- a/src/i18n/locales/nl_NL/video.json
+++ b/src/i18n/locales/nl_NL/video.json
@@ -1,6 +1,7 @@
 {
   "add_to_favorites": "",
   "all_seasons": "",
+  "complete_your_subscription": "",
   "continue_watching": "",
   "copied_url": "",
   "current_episode": "",
@@ -8,8 +9,10 @@
   "episodes": "",
   "favorite": "",
   "remove_from_favorites": "",
+  "renew_your_subscription": "",
   "season_prefix": "",
   "share": "",
+  "sign_up_to_start_watching": "",
   "start_watching": "",
   "total_episodes": "",
   "total_episodes_plural": "",
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index f3605b78c..0d0013830 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
 
 import { useFavorites } from '../../stores/FavoritesStore';
-import { ConfigContext } from '../../providers/ConfigProvider';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { cardUrl, movieURL, videoUrl } from '../../utils/formatting';
 import type { PlaylistItem } from '../../../types/playlist';
@@ -19,6 +19,11 @@ import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import useRecommendedPlaylist from '../../hooks/useRecommendationsPlaylist';
 import { watchHistoryStore } from '../../stores/WatchHistoryStore';
 import { VideoProgressMinMax } from '../../config';
+import { ConfigStore } from '../../stores/ConfigStore';
+import { AccountStore } from '../../stores/AccountStore';
+import { configHasCleengOffer } from '../../utils/cleeng';
+import type { Subscription } from '../../../types/subscription';
+import { getSubscriptions } from '../../services/subscription.service';
 
 import styles from './Movie.module.scss';
 
@@ -26,27 +31,31 @@ type MovieRouteParams = {
   id: string;
 };
 
-const Movie = ({
-  match: {
-    params: { id },
-  },
-  location,
-}: RouteComponentProps<MovieRouteParams>): JSX.Element => {
-  const config = useContext(ConfigContext);
+const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.Element => {
+  // Routing
   const history = useHistory();
-  const { t } = useTranslation('video');
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+  const id = match?.params.id;
+  const play = searchParams.get('play') === '1';
+  const feedId = searchParams.get('l');
+
+  // Config
+  const config = ConfigStore.useState((s) => s.config);
+  const { cleengId, options, recommendationsPlaylist, siteName, cleengSandbox } = config;
+  const configHasOffer = configHasCleengOffer(config);
+  const posterFading: boolean = options?.posterFading === true;
+  const enableSharing: boolean = options?.enableSharing === true;
+
+  const { t } = useTranslation('video');
+
+  // Media
   const { isLoading, error, data: item } = useMedia(id);
+  const requiresSubscription = item?.requiresSubscription !== 'false';
+  useBlurImageUpdater(item);
   const { data: trailerItem } = useMedia(item?.trailerId || '');
+  const { data: playlist } = useRecommendedPlaylist(recommendationsPlaylist || '', item);
 
   const { hasItem, saveItem, removeItem } = useFavorites();
-  const play = searchParams.get('play') === '1';
-  const feedId = searchParams.get('l');
-  const posterFading: boolean = config ? config.options.posterFading === true : false;
-
-  const [hasShared, setHasShared] = useState<boolean>(false);
-  const [playTrailer, setPlayTrailer] = useState<boolean>(false);
-  const enableSharing: boolean = config.options.enableSharing === true;
 
   const watchHistory = watchHistoryStore.useState((s) => s.watchHistory);
   const watchHistoryItem =
@@ -54,16 +63,32 @@ const Movie = ({
     watchHistory.find(({ mediaid, progress }) => {
       return mediaid === item.mediaid && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max;
     });
+  const progress = watchHistoryItem?.progress;
 
-  useBlurImageUpdater(item);
-
+  // General state
   const isFavorited = !!item && hasItem(item);
+  const [hasShared, setHasShared] = useState<boolean>(false);
+  const [playTrailer, setPlayTrailer] = useState<boolean>(false);
 
-  const startPlay = () => item && history.push(videoUrl(item, searchParams.get('r'), true));
-  const goBack = () => item && history.push(videoUrl(item, searchParams.get('r'), false));
+  // User
+  const user = AccountStore.useState((state) => state.user);
+  const auth = AccountStore.useState((state) => state.auth);
+  const jwt = auth?.jwt || '';
+  const customerId = user?.id || -1; // id must be number
+  const getSubscriptionsQuery = useQuery(['subscriptions', customerId], () => getSubscriptions({ customerId }, cleengSandbox, jwt), {
+    enabled: !!user,
+  });
+  const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
+  const subscriptions = subscriptionsResult?.responseData?.items;
+  const hasActiveSubscription = subscriptions?.find((subscription: Subscription) => subscription.status === 'active');
+  const allowedToWatch = useMemo<boolean>(
+    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !hasActiveSubscription)),
+    [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
+  );
 
+  // Handlers
+  const goBack = () => item && history.push(videoUrl(item, searchParams.get('r'), false));
   const onCardClick = (item: PlaylistItem) => history.push(cardUrl(item));
-
   const onShareClick = (): void => {
     if (!item) return;
 
@@ -76,7 +101,32 @@ const Movie = ({
     setHasShared(true);
     setTimeout(() => setHasShared(false), 2000);
   };
+  const handleComplete = useCallback(() => {
+    if (!id || !playlist) return;
+
+    const index = playlist.playlist.findIndex(({ mediaid }) => mediaid === id);
+    const nextItem = playlist.playlist[index + 1];
+
+    return nextItem && history.push(videoUrl(nextItem, searchParams.get('r'), true));
+  }, [history, id, playlist, searchParams]);
+
+  const formatStartWatchingLabel = (): string => {
+    if (allowedToWatch) return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
+    if (!user) return t('sign_up_to_start_watching');
+    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'cancelled')) return t('complete_your_subscription');
+    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'expired')) return t('renew_your_subscription');
+    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'terminated')) return t('renew_your_subscription'); //todo: is this correct?
+    return '';
+  };
+
+  const handleStartWatchingClick = useCallback(() => {
+    if (!user) return history.push('?u=login');
+    if (!allowedToWatch) return history.push('/u/payment');
+
+    return item && history.push(videoUrl(item, searchParams.get('r'), true));
+  }, [user, history, allowedToWatch, item, searchParams]);
 
+  // Effects
   useEffect(() => {
     document.body.style.overflowY = play ? 'hidden' : '';
     return () => {
@@ -88,21 +138,11 @@ const Movie = ({
     (document.scrollingElement || document.body).scroll({ top: 0, behavior: 'smooth' });
   }, [id]);
 
-  const { data: playlist } = useRecommendedPlaylist(config.recommendationsPlaylist || '', item);
-
-  const handleComplete = useCallback(() => {
-    if (!id || !playlist) return;
-
-    const index = playlist.playlist.findIndex(({ mediaid }) => mediaid === id);
-    const nextItem = playlist.playlist[index + 1];
-
-    return nextItem && history.push(videoUrl(nextItem, searchParams.get('r'), true));
-  }, [history, id, playlist, searchParams]);
-
-  if (isLoading && !item) return <LoadingOverlay />;
+  // UI
+  if ((isLoading && !item) || isSubscriptionsLoading) return <LoadingOverlay />;
   if ((!isLoading && error) || !item) return <ErrorPage title="Video not found!" />;
 
-  const pageTitle = `${item.title} - ${config.siteName}`;
+  const pageTitle = `${item.title} - ${siteName}`;
   const canonicalUrl = item ? `${window.location.origin}${movieURL(item)}` : window.location.href;
 
   return (
@@ -137,10 +177,12 @@ const Movie = ({
         feedId={feedId ?? undefined}
         trailerItem={trailerItem}
         play={play}
-        startPlay={startPlay}
+        allowedToWatch={allowedToWatch}
+        startWatchingLabel={formatStartWatchingLabel()}
+        onStartWatchingClick={handleStartWatchingClick}
         goBack={goBack}
         onComplete={handleComplete}
-        progress={watchHistoryItem?.progress}
+        progress={progress}
         poster={posterFading ? 'fading' : 'normal'}
         enableSharing={enableSharing}
         hasShared={hasShared}
@@ -162,7 +204,7 @@ const Movie = ({
               isLoading={isLoading}
               currentCardItem={item}
               currentCardLabel={t('currently_playing')}
-              enableCardTitles={config.options.shelveTitles}
+              enableCardTitles={options.shelveTitles}
             />
           </>
         ) : undefined}
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index d2f2b13a4..704fd5619 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -1,12 +1,12 @@
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useQuery } from 'react-query';
 
 import CardGrid from '../../components/CardGrid/CardGrid';
 import { useFavorites } from '../../stores/FavoritesStore';
-import { ConfigContext } from '../../providers/ConfigProvider';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { episodeURL } from '../../utils/formatting';
 import Filter from '../../components/Filter/Filter';
@@ -21,6 +21,11 @@ import { filterSeries, getFiltersFromSeries } from '../../utils/collection';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import { useWatchHistory, watchHistoryStore } from '../../stores/WatchHistoryStore';
 import { VideoProgressMinMax } from '../../config';
+import { ConfigStore } from '../../stores/ConfigStore';
+import { configHasCleengOffer } from '../../utils/cleeng';
+import { AccountStore } from '../../stores/AccountStore';
+import { getSubscriptions } from '../../services/subscription.service';
+import type { Subscription } from '../../../types/subscription';
 
 import styles from './Series.module.scss';
 
@@ -28,65 +33,74 @@ type SeriesRouteParams = {
   id: string;
 };
 
-const Series = ({
-  match: {
-    params: { id },
-  },
-  location,
-}: RouteComponentProps<SeriesRouteParams>): JSX.Element => {
-  const config = useContext(ConfigContext);
+const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JSX.Element => {
+  // Routing
   const history = useHistory();
-  const { t } = useTranslation('video');
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+  const id = match?.params.id;
+  const episodeId = searchParams.get('e') || '';
+  const play = searchParams.get('play') === '1';
+  const feedId = searchParams.get('l');
+
+  // Config
+  const config = ConfigStore.useState((s) => s.config);
+  const { cleengId, options, siteName, cleengSandbox } = config;
+  const configHasOffer = configHasCleengOffer(config);
+  const posterFading: boolean = options?.posterFading === true;
+  const enableSharing: boolean = options?.enableSharing === true;
+
+  const { t } = useTranslation('video');
+
+  // Media
+  const { isLoading, error, data: item } = useMedia(episodeId);
+  const requiresSubscription = item?.requiresSubscription !== 'false';
+  useBlurImageUpdater(item);
+  const { data: trailerItem } = useMedia(item?.trailerId || '');
   const {
     isLoading: playlistIsLoading,
     error: playlistError,
     data: seriesPlaylist = { title: '', playlist: [] },
   } = usePlaylist(id, undefined, true, false);
-  const episodeId = searchParams.get('e') || '';
-  const { isLoading, error, data: item } = useMedia(episodeId);
-  const { data: trailerItem } = useMedia(item?.trailerId || '');
-
   const [seasonFilter, setSeasonFilter] = useState<string>('');
   const filters = getFiltersFromSeries(seriesPlaylist.playlist);
   const filteredPlaylist = useMemo(() => filterSeries(seriesPlaylist.playlist, seasonFilter), [seriesPlaylist, seasonFilter]);
 
   const { hasItem, saveItem, removeItem } = useFavorites();
-  const play = searchParams.get('play') === '1';
-  const feedId = searchParams.get('l');
-  const posterFading: boolean = config ? config.options.posterFading === true : false;
-
-  const [hasShared, setHasShared] = useState<boolean>(false);
-  const [playTrailer, setPlayTrailer] = useState<boolean>(false);
-  const enableSharing: boolean = config.options.enableSharing === true;
 
-  const { getDictionary: getWatchHistoryDictionary } = useWatchHistory();
-  const watchHistoryDictionary = getWatchHistoryDictionary();
   const watchHistory = watchHistoryStore.useState((s) => s.watchHistory);
   const watchHistoryItem =
     item &&
     watchHistory.find(({ mediaid, progress }) => {
       return mediaid === item.mediaid && progress > VideoProgressMinMax.Min && progress < VideoProgressMinMax.Max;
     });
+  const progress = watchHistoryItem?.progress;
+  const { getDictionary: getWatchHistoryDictionary } = useWatchHistory();
+  const watchHistoryDictionary = getWatchHistoryDictionary();
 
-  useBlurImageUpdater(item);
-
+  // General state
   const isFavorited = !!item && hasItem(item);
+  const [hasShared, setHasShared] = useState<boolean>(false);
+  const [playTrailer, setPlayTrailer] = useState<boolean>(false);
 
-  const startPlay = () => item && seriesPlaylist && history.push(episodeURL(seriesPlaylist, item.mediaid, true));
-  const goBack = () => item && seriesPlaylist && history.push(episodeURL(seriesPlaylist, item.mediaid, false));
+  // User
+  const user = AccountStore.useState((state) => state.user);
+  const auth = AccountStore.useState((state) => state.auth);
+  const jwt = auth?.jwt || '';
+  const customerId = user?.id || -1; // id must be number
+  const getSubscriptionsQuery = useQuery(['subscriptions', customerId], () => getSubscriptions({ customerId }, cleengSandbox, jwt), {
+    enabled: !!user,
+  });
+  const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
+  const subscriptions = subscriptionsResult?.responseData?.items;
+  const hasActiveSubscription = subscriptions?.find((subscription: Subscription) => subscription.status === 'active');
+  const allowedToWatch = useMemo<boolean>(
+    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !hasActiveSubscription)),
+    [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
+  );
 
+  // Handlers
+  const goBack = () => item && seriesPlaylist && history.push(episodeURL(seriesPlaylist, item.mediaid, false));
   const onCardClick = (item: PlaylistItem) => seriesPlaylist && history.push(episodeURL(seriesPlaylist, item.mediaid));
-
-  const handleComplete = useCallback(() => {
-    if (!item || !seriesPlaylist) return;
-
-    const index = seriesPlaylist.playlist.findIndex(({ mediaid }) => mediaid === item.mediaid);
-    const nextItem = seriesPlaylist.playlist[index + 1];
-
-    return nextItem && history.push(episodeURL(seriesPlaylist, nextItem.mediaid, true));
-  }, [history, item, seriesPlaylist]);
-
   const onShareClick = (): void => {
     if (!item) return;
 
@@ -99,17 +113,36 @@ const Series = ({
     setHasShared(true);
     setTimeout(() => setHasShared(false), 2000);
   };
+  const handleComplete = useCallback(() => {
+    if (!item || !seriesPlaylist) return;
 
-  useEffect(() => {
-    if (!searchParams.has('e') && seriesPlaylist?.playlist.length) {
-      history.replace(episodeURL(seriesPlaylist, seriesPlaylist.playlist[0].mediaid));
-    }
-  }, [history, searchParams, seriesPlaylist]);
+    const index = seriesPlaylist.playlist.findIndex(({ mediaid }) => mediaid === item.mediaid);
+    const nextItem = seriesPlaylist.playlist[index + 1];
+
+    return nextItem && history.push(episodeURL(seriesPlaylist, nextItem.mediaid, true));
+  }, [history, item, seriesPlaylist]);
+
+  const formatStartWatchingLabel = (): string => {
+    if (allowedToWatch) return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
+    if (!user) return t('sign_up_to_start_watching');
+    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'cancelled')) return t('complete_your_subscription');
+    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'expired')) return t('renew_your_subscription');
+    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'terminated')) return t('renew_your_subscription'); //todo: is this correct?
+    return '';
+  };
+
+  const handleStartWatchingClick = useCallback(() => {
+    if (!user) return history.push('?u=login');
+    if (!allowedToWatch) return history.push('/u/payment');
 
+    return history.push(episodeURL(seriesPlaylist, item?.mediaid, true));
+  }, [user, history, allowedToWatch, item, seriesPlaylist]);
+
+  // Effects
   useEffect(() => {
-    if (play) document.body.style.overflowY = 'hidden';
+    document.body.style.overflowY = play ? 'hidden' : '';
     return () => {
-      if (play) document.body.style.overflowY = '';
+      document.body.style.overflowY = '';
     };
   }, [play]);
 
@@ -117,11 +150,18 @@ const Series = ({
     (document.scrollingElement || document.body).scroll({ top: 0, behavior: 'smooth' });
   }, [episodeId]);
 
-  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
+  useEffect(() => {
+    if (!searchParams.has('e') && seriesPlaylist?.playlist.length) {
+      history.replace(episodeURL(seriesPlaylist, seriesPlaylist.playlist[0].mediaid));
+    }
+  }, [history, searchParams, seriesPlaylist]);
+
+  // UI
+  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e') || isSubscriptionsLoading) return <LoadingOverlay />;
   if ((!isLoading && error) || !item) return <ErrorPage title="Episode not found!" />;
   if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
 
-  const pageTitle = `${item.title} - ${config.siteName}`;
+  const pageTitle = `${item.title} - ${siteName}`;
   const canonicalUrl = seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;
 
   return (
@@ -157,8 +197,10 @@ const Series = ({
         feedId={feedId ?? undefined}
         trailerItem={trailerItem}
         play={play}
-        progress={watchHistoryItem?.progress}
-        startPlay={startPlay}
+        allowedToWatch={allowedToWatch}
+        progress={progress}
+        startWatchingLabel={formatStartWatchingLabel()}
+        onStartWatchingClick={handleStartWatchingClick}
         goBack={goBack}
         onComplete={handleComplete}
         poster={posterFading ? 'fading' : 'normal'}
@@ -193,7 +235,7 @@ const Series = ({
             isLoading={isLoading}
             currentCardItem={item}
             currentCardLabel={t('current_episode')}
-            enableCardTitles={config.options.shelveTitles}
+            enableCardTitles={options.shelveTitles}
           />
         </>
       </VideoComponent>
diff --git a/src/utils/cleeng.ts b/src/utils/cleeng.ts
new file mode 100644
index 000000000..5dd90fca5
--- /dev/null
+++ b/src/utils/cleeng.ts
@@ -0,0 +1,7 @@
+import type { Config } from '../../types/Config';
+
+export const configHasCleengOffer = (config: Config): boolean => {
+  if (!config?.json) return false;
+
+  return !!config.json.cleengMonthlyOffer || !!config.json.cleengYearlyOffer;
+};
diff --git a/types/playlist.d.ts b/types/playlist.d.ts
index e1db65f92..88ec4a2b1 100644
--- a/types/playlist.d.ts
+++ b/types/playlist.d.ts
@@ -27,6 +27,7 @@ export type PlaylistItem = {
   mediaid: string;
   pubdate: number;
   rating: string;
+  requiresSubscription?: string | null;
   seasonNumber?: string;
   sources: Source[];
   seriesId?: string;

From d6510f3bab183253d94ab9142f3fd83d0aa4ebaa Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 30 Jul 2021 14:21:22 +0200
Subject: [PATCH 02/28] refactor(videodetail): fix incorrect
 hasActiveSubscription condition

---
 src/screens/Movie/Movie.tsx   | 2 +-
 src/screens/Series/Series.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index 0d0013830..99482d1fa 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -82,7 +82,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   const subscriptions = subscriptionsResult?.responseData?.items;
   const hasActiveSubscription = subscriptions?.find((subscription: Subscription) => subscription.status === 'active');
   const allowedToWatch = useMemo<boolean>(
-    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !hasActiveSubscription)),
+    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!hasActiveSubscription)),
     [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
   );
 
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index 704fd5619..5b23c8410 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -94,7 +94,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   const subscriptions = subscriptionsResult?.responseData?.items;
   const hasActiveSubscription = subscriptions?.find((subscription: Subscription) => subscription.status === 'active');
   const allowedToWatch = useMemo<boolean>(
-    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !hasActiveSubscription)),
+    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!hasActiveSubscription)),
     [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
   );
 

From f01075e73f85880fc6ef04639b054bd1c48ebca6 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 30 Jul 2021 15:58:23 +0200
Subject: [PATCH 03/28] refactor(videodetail): implement cancelled as active
 subscr status

---
 src/screens/Movie/Movie.tsx   | 14 +++++++-------
 src/screens/Series/Series.tsx | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index 99482d1fa..41cc14a53 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -80,7 +80,9 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   });
   const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
   const subscriptions = subscriptionsResult?.responseData?.items;
-  const hasActiveSubscription = subscriptions?.find((subscription: Subscription) => subscription.status === 'active');
+  const hasActiveSubscription = subscriptions?.find(
+    (subscription: Subscription) => subscription.status === 'active' || subscription.status === 'cancelled',
+  );
   const allowedToWatch = useMemo<boolean>(
     () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!hasActiveSubscription)),
     [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
@@ -111,17 +113,15 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   }, [history, id, playlist, searchParams]);
 
   const formatStartWatchingLabel = (): string => {
-    if (allowedToWatch) return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
     if (!user) return t('sign_up_to_start_watching');
-    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'cancelled')) return t('complete_your_subscription');
-    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'expired')) return t('renew_your_subscription');
-    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'terminated')) return t('renew_your_subscription'); //todo: is this correct?
-    return '';
+    if (!subscriptions?.length) return t('complete_your_subscription');
+    if (!hasActiveSubscription) return t('renew_your_subscription');
+    return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
   const handleStartWatchingClick = useCallback(() => {
     if (!user) return history.push('?u=login');
-    if (!allowedToWatch) return history.push('/u/payment');
+    if (!allowedToWatch) return history.push('/u/payments');
 
     return item && history.push(videoUrl(item, searchParams.get('r'), true));
   }, [user, history, allowedToWatch, item, searchParams]);
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index 5b23c8410..235a4bf5d 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -92,7 +92,9 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   });
   const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
   const subscriptions = subscriptionsResult?.responseData?.items;
-  const hasActiveSubscription = subscriptions?.find((subscription: Subscription) => subscription.status === 'active');
+  const hasActiveSubscription = subscriptions?.find(
+    (subscription: Subscription) => subscription.status === 'active' || subscription.status === 'cancelled',
+  );
   const allowedToWatch = useMemo<boolean>(
     () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!hasActiveSubscription)),
     [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
@@ -123,17 +125,15 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   }, [history, item, seriesPlaylist]);
 
   const formatStartWatchingLabel = (): string => {
-    if (allowedToWatch) return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
     if (!user) return t('sign_up_to_start_watching');
-    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'cancelled')) return t('complete_your_subscription');
-    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'expired')) return t('renew_your_subscription');
-    if (subscriptions?.find((subscription: Subscription) => subscription.status === 'terminated')) return t('renew_your_subscription'); //todo: is this correct?
-    return '';
+    if (!subscriptions?.length) return t('complete_your_subscription');
+    if (!hasActiveSubscription) return t('renew_your_subscription');
+    return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
   const handleStartWatchingClick = useCallback(() => {
     if (!user) return history.push('?u=login');
-    if (!allowedToWatch) return history.push('/u/payment');
+    if (!allowedToWatch) return history.push('/u/payments');
 
     return history.push(episodeURL(seriesPlaylist, item?.mediaid, true));
   }, [user, history, allowedToWatch, item, seriesPlaylist]);

From 61b65c79ddae14955e8bed36ff82f435e23bd86a Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Fri, 30 Jul 2021 16:26:19 +0200
Subject: [PATCH 04/28] chore(menu): fixed button labels

---
 src/components/Header/Header.tsx                     |  2 +-
 .../Header/__snapshots__/Header.test.tsx.snap        |  2 +-
 src/components/Layout/Layout.tsx                     | 12 ++----------
 .../Layout/__snapshots__/Layout.test.tsx.snap        |  6 +++---
 src/i18n/locales/en_US/menu.json                     |  1 +
 src/i18n/locales/nl_NL/menu.json                     |  1 +
 6 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index f23a51983..d4e58f7f2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -105,7 +105,7 @@ const Header: React.FC<Props> = ({
         </React.Fragment>
       ) : (
         <div className={styles.buttonContainer}>
-          <Button onClick={onLoginButtonClick} label={t('sign_up')} />
+          <Button onClick={onLoginButtonClick} label={t('sign_in')} />
           <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} />
         </div>
       )
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
index f16f0d2e2..f9d127240 100644
--- a/src/components/Header/__snapshots__/Header.test.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`<Header /> renders header 1`] = `
           class="button default outlined"
         >
           <span>
-            sign_up
+            sign_in
           </span>
         </button>
         <button
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 3c9c815be..5d067fd77 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -76,16 +76,8 @@ const Layout: FC<LayoutProps> = ({ children }) => {
     <UserMenu />
   ) : (
     <div className={styles.buttonContainer}>
-      <Button fullWidth onClick={loginButtonClickHandler} label="Login" />
-      <Button
-        variant="contained"
-        color="primary"
-        onClick={() => {
-          'sign up';
-        }}
-        label="Sign up"
-        fullWidth
-      />
+      <Button fullWidth onClick={loginButtonClickHandler} label={t('sign_in')} />
+      <Button variant="contained" color="primary" onClick={signUpButtonClickHandler} label={t('sign_up')} fullWidth />
     </div>
   );
 
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
index 30ccafb88..25cfab8ba 100644
--- a/src/components/Layout/__snapshots__/Layout.test.tsx.snap
+++ b/src/components/Layout/__snapshots__/Layout.test.tsx.snap
@@ -56,7 +56,7 @@ exports[`<Layout /> renders layout 1`] = `
               class="button default outlined"
             >
               <span>
-                sign_up
+                sign_in
               </span>
             </button>
             <button
@@ -126,14 +126,14 @@ exports[`<Layout /> renders layout 1`] = `
               class="button default outlined fullWidth"
             >
               <span>
-                Login
+                sign_in
               </span>
             </button>
             <button
               class="button primary fullWidth"
             >
               <span>
-                Sign up
+                sign_up
               </span>
             </button>
           </div>
diff --git a/src/i18n/locales/en_US/menu.json b/src/i18n/locales/en_US/menu.json
index fcf1f91dd..d4330a70d 100644
--- a/src/i18n/locales/en_US/menu.json
+++ b/src/i18n/locales/en_US/menu.json
@@ -2,5 +2,6 @@
   "close_menu": "Close menu",
   "open_menu": "Open menu",
   "open_user_menu": "Open user menu",
+  "sign_in": "Sign in",
   "sign_up": "Sign up"
 }
diff --git a/src/i18n/locales/nl_NL/menu.json b/src/i18n/locales/nl_NL/menu.json
index 9b8886a93..51f7873fc 100644
--- a/src/i18n/locales/nl_NL/menu.json
+++ b/src/i18n/locales/nl_NL/menu.json
@@ -2,5 +2,6 @@
   "close_menu": "",
   "open_menu": "",
   "open_user_menu": "",
+  "sign_in": "",
   "sign_up": ""
 }

From dc04cf1d52cfd1a0f30ffe97b0fe860baf4d9d81 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Fri, 30 Jul 2021 16:31:27 +0200
Subject: [PATCH 05/28] chore(project): fix modal stuck on login view

---
 src/containers/AccountModal/AccountModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/AccountModal/AccountModal.tsx b/src/containers/AccountModal/AccountModal.tsx
index cf250b231..dc4dd7a4a 100644
--- a/src/containers/AccountModal/AccountModal.tsx
+++ b/src/containers/AccountModal/AccountModal.tsx
@@ -27,7 +27,7 @@ const AccountModal = () => {
   const [view, setView] = useState(viewParam);
   const message = useQueryParam('message');
   const { loading, auth } = AccountStore.useState((s) => s);
-  const isPublicView = viewParam && !PUBLIC_VIEWS.includes(viewParam);
+  const isPublicView = viewParam && PUBLIC_VIEWS.includes(viewParam);
 
   useEffect(() => {
     // make sure the last view is rendered even when the modal gets closed

From 345ac68ec15bd1df6400f03dee22338dc35394bd Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 30 Jul 2021 16:43:46 +0200
Subject: [PATCH 06/28] feat(project): add paywall lock icon to shelf/grid
 items

---
 src/components/Card/Card.module.scss          | 19 ++++++++++++++--
 src/components/Card/Card.tsx                  | 12 +++++++++-
 src/components/CardGrid/CardGrid.tsx          |  5 +++++
 src/components/Shelf/Shelf.tsx                | 18 ++++++++++++++-
 .../Subscription/SubscriptionContainer.ts     |  2 +-
 src/icons/Lock.tsx                            | 11 ++++++++++
 src/screens/Home/Home.tsx                     | 22 ++++++++++++-------
 src/screens/Movie/Movie.tsx                   |  4 +++-
 src/screens/Playlist/Playlist.tsx             | 14 ++++++++----
 src/screens/Search/Search.tsx                 | 14 +++++++++---
 src/screens/Series/Series.tsx                 |  4 +++-
 11 files changed, 103 insertions(+), 22 deletions(-)
 create mode 100644 src/icons/Lock.tsx

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index d80ab1e92..e67210b19 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -19,7 +19,7 @@
 
       & .poster {
         box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
-        0 4px 5px rgb(0 0 0 / 20%);
+          0 4px 5px rgb(0 0 0 / 20%);
       }
     }
   }
@@ -162,12 +162,18 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   color: var(--card-color);
 }
 
+.tags {
+  display: flex;
+}
+
 .tag {
+  display: flex;
+  align-items: center;
   padding: 4px 8px;
   color: var(--card-color);
   font-family: var(--body-font-family);
   font-weight: 600;
-  font-size: 13px;
+  font-size: 16px;
   white-space: nowrap;
   background-color: rgba(variables.$black, 0.6);
   border-radius: 4px;
@@ -176,6 +182,15 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   }
 }
 
+.lock {
+  margin-right: variables.$base-spacing / 2;
+  padding: 2px 6px;
+  > svg {
+    width: 16px;
+    height: 21px;
+  }
+}
+
 .live {
   background-color: variables.$red;
 }
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 2fd77d14d..be3afef06 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import { formatDurationTag } from '../../utils/formatting';
+import Lock from '../../icons/Lock';
 
 import styles from './Card.module.scss';
 
@@ -21,6 +22,7 @@ type CardProps = {
   disabled?: boolean;
   loading?: boolean;
   isCurrent?: boolean;
+  isLocked?: boolean;
   currentLabel?: string;
   enableTitle?: boolean;
 };
@@ -41,6 +43,7 @@ function Card({
   disabled = false,
   loading = false,
   isCurrent = false,
+  isLocked = true,
   currentLabel,
 }: CardProps): JSX.Element {
   const { t } = useTranslation('common');
@@ -85,7 +88,14 @@ function Card({
         {!loading && (
           <div className={styles.meta}>
             {featured && !disabled && enableTitle && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
-            {renderTag()}
+            <div className={styles.tags}>
+              {isLocked && (
+                <div className={classNames(styles.tag, styles.lock)}>
+                  <Lock />
+                </div>
+              )}
+              {renderTag()}
+            </div>
           </div>
         )}
         {progress ? (
diff --git a/src/components/CardGrid/CardGrid.tsx b/src/components/CardGrid/CardGrid.tsx
index 99cf79614..f65fcbce9 100644
--- a/src/components/CardGrid/CardGrid.tsx
+++ b/src/components/CardGrid/CardGrid.tsx
@@ -27,6 +27,8 @@ type CardGridProps = {
   cols?: Breakpoints;
   currentCardItem?: PlaylistItem;
   currentCardLabel?: string;
+  hasActiveSubscription: boolean;
+  requiresSubscription: boolean;
 };
 
 function CardGrid({
@@ -39,6 +41,8 @@ function CardGrid({
   cols = defaultCols,
   currentCardItem,
   currentCardLabel,
+  requiresSubscription,
+  hasActiveSubscription,
 }: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
@@ -69,6 +73,7 @@ function CardGrid({
             loading={isLoading}
             isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
             currentLabel={currentCardLabel}
+            isLocked={requiresSubscription && !hasActiveSubscription && playlistItem.requiresSubscription !== 'false'}
           />
         </div>
       </div>
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
index e7343bfad..9d83560e9 100644
--- a/src/components/Shelf/Shelf.tsx
+++ b/src/components/Shelf/Shelf.tsx
@@ -39,6 +39,8 @@ export type ShelfProps = {
   loading?: boolean;
   error?: unknown;
   title?: string;
+  hasActiveSubscription: boolean;
+  requiresSubscription: boolean;
 };
 
 const Shelf: React.FC<ShelfProps> = ({
@@ -52,6 +54,8 @@ const Shelf: React.FC<ShelfProps> = ({
   featured = false,
   loading = false,
   error = null,
+  requiresSubscription,
+  hasActiveSubscription,
 }: ShelfProps) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const { t } = useTranslation('common');
@@ -76,9 +80,21 @@ const Shelf: React.FC<ShelfProps> = ({
         featured={featured}
         disabled={!isInView}
         loading={loading}
+        isLocked={requiresSubscription && !hasActiveSubscription && item.requiresSubscription !== 'false'}
       />
     ),
-    [enableCardTitles, featured, imageSourceWidth, loading, onCardClick, onCardHover, playlist.feedid, watchHistory],
+    [
+      enableCardTitles,
+      featured,
+      imageSourceWidth,
+      loading,
+      onCardClick,
+      onCardHover,
+      playlist.feedid,
+      watchHistory,
+      requiresSubscription,
+      hasActiveSubscription,
+    ],
   );
 
   const renderRightControl = useCallback(
diff --git a/src/containers/Subscription/SubscriptionContainer.ts b/src/containers/Subscription/SubscriptionContainer.ts
index 3d449965e..114cc6a63 100644
--- a/src/containers/Subscription/SubscriptionContainer.ts
+++ b/src/containers/Subscription/SubscriptionContainer.ts
@@ -37,7 +37,7 @@ const SubscriptionContainer = ({ children }: Props): JSX.Element => {
   const { data: transactions, isLoading: isTransactionsLoading } = getTransactionsQuery;
 
   return children({
-    activeSubscription: subscriptions?.responseData.items.find(
+    activeSubscription: subscriptions?.responseData?.items.find(
       (subscription) => subscription.status !== 'expired' && subscription.status !== 'terminated',
     ),
     activePaymentDetail: paymentDetails?.responseData.paymentDetails.find((paymentDetails) => paymentDetails.active),
diff --git a/src/icons/Lock.tsx b/src/icons/Lock.tsx
new file mode 100644
index 000000000..59f29324a
--- /dev/null
+++ b/src/icons/Lock.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import createIcon from './Icon';
+
+export default createIcon(
+  '0 0 24 24',
+  <path
+    fill="currentColor"
+    d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"
+  />,
+);
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
index 87516ac67..0bedb67ec 100644
--- a/src/screens/Home/Home.tsx
+++ b/src/screens/Home/Home.tsx
@@ -1,23 +1,25 @@
-import React, { CSSProperties, useContext, useRef, useEffect, useCallback } from 'react';
+import React, { CSSProperties, useRef, useEffect, useCallback } from 'react';
 import memoize from 'memoize-one';
 import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
 import List from 'react-virtualized/dist/commonjs/List';
 import { useHistory } from 'react-router-dom';
-import type { Config, Content } from 'types/Config';
+import type { Content } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 import classNames from 'classnames';
 
 import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { favoritesStore } from '../../stores/FavoritesStore';
+import { AccountStore } from '../../stores/AccountStore';
+import { ConfigStore } from '../../stores/ConfigStore';
 import { PersonalShelf } from '../../enum/PersonalShelf';
 import { useWatchHistory } from '../../stores/WatchHistoryStore';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import ShelfComponent, { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
-import { ConfigContext } from '../../providers/ConfigProvider';
 import usePlaylist from '../../hooks/usePlaylist';
 import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 import scrollbarSize from '../../utils/dom';
 import { cardUrl } from '../../utils/formatting';
+import { configHasCleengOffer } from '../../utils/cleeng';
 
 import styles from './Home.module.scss';
 
@@ -35,10 +37,11 @@ const createItemData = memoize((content) => ({ content }));
 
 const Home = (): JSX.Element => {
   const history = useHistory();
-  const config: Config = useContext(ConfigContext);
+  const config = ConfigStore.useState((state) => state.config);
   const breakpoint = useBreakpoint();
   const listRef = useRef<List>() as React.MutableRefObject<List>;
   const content: Content[] = config?.content;
+  const itemData: ItemData = createItemData(content);
 
   const { getPlaylist: getWatchHistoryPlaylist, getDictionary: getWatchHistoryDictionary } = useWatchHistory();
   const watchHistory = getWatchHistoryPlaylist();
@@ -48,6 +51,9 @@ const Home = (): JSX.Element => {
   const { data: { playlist } = { playlist: [] } } = usePlaylist(content[0]?.playlistId);
   const updateBlurImage = useBlurImageUpdater(playlist);
 
+  const hasActiveSubscription = !!AccountStore.useState((state) => state.subscription);
+  const requiresSubscription = !!config.cleengId && configHasCleengOffer(config);
+
   const onCardClick = useCallback(
     (playlistItem: PlaylistItem, playlistId?: string) => {
       history.push(cardUrl(playlistItem, playlistId, playlistId === PersonalShelf.ContinueWatching));
@@ -56,8 +62,6 @@ const Home = (): JSX.Element => {
   );
   const onCardHover = useCallback((playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image), [updateBlurImage]);
 
-  const itemData: ItemData = createItemData(content);
-
   const rowRenderer = ({ index, key, style, itemData }: rowData) => {
     if (!itemData?.content?.[index]) return null;
 
@@ -79,6 +83,8 @@ const Home = (): JSX.Element => {
                 enableCardTitles={config.options.shelveTitles}
                 title={playlist.title}
                 featured={contentItem.featured === true}
+                hasActiveSubscription={hasActiveSubscription}
+                requiresSubscription={requiresSubscription}
               />
             </div>
           </div>
@@ -122,13 +128,13 @@ const Home = (): JSX.Element => {
 
   useEffect(() => {
     if (favorites || watchHistory) {
-      ((listRef.current as unknown) as List)?.recomputeRowHeights();
+      (listRef.current as unknown as List)?.recomputeRowHeights();
     }
   }, [favorites, watchHistory]);
 
   return (
     <div className={styles.home}>
-      <WindowScroller onResize={() => ((listRef.current as unknown) as List)?.recomputeRowHeights()}>
+      <WindowScroller onResize={() => (listRef.current as unknown as List)?.recomputeRowHeights()}>
         {({ height, isScrolling, onChildScroll, scrollTop }) => (
           <List
             className={styles.list}
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index 41cc14a53..33ebd17ec 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -80,7 +80,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   });
   const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
   const subscriptions = subscriptionsResult?.responseData?.items;
-  const hasActiveSubscription = subscriptions?.find(
+  const hasActiveSubscription = !!subscriptions?.find(
     (subscription: Subscription) => subscription.status === 'active' || subscription.status === 'cancelled',
   );
   const allowedToWatch = useMemo<boolean>(
@@ -205,6 +205,8 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
               currentCardItem={item}
               currentCardLabel={t('currently_playing')}
               enableCardTitles={options.shelveTitles}
+              hasActiveSubscription={hasActiveSubscription}
+              requiresSubscription={!!cleengId && configHasOffer}
             />
           </>
         ) : undefined}
diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
index dce7c6b42..25cb5d613 100644
--- a/src/screens/Playlist/Playlist.tsx
+++ b/src/screens/Playlist/Playlist.tsx
@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router-dom';
 import type { PlaylistItem } from 'types/playlist';
-import type { Config } from 'types/Config';
 import { Helmet } from 'react-helmet';
 
-import { ConfigContext } from '../../providers/ConfigProvider';
 import { cardUrl } from '../../utils/formatting';
 import usePlaylist from '../../hooks/usePlaylist';
 import { filterPlaylist, getFiltersFromConfig } from '../../utils/collection';
@@ -12,6 +10,9 @@ import CardGrid from '../../components/CardGrid/CardGrid';
 import ErrorPage from '../../components/ErrorPage/ErrorPage';
 import Filter from '../../components/Filter/Filter';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
+import { AccountStore } from '../../stores/AccountStore';
+import { ConfigStore } from '../../stores/ConfigStore';
+import { configHasCleengOffer } from '../../utils/cleeng';
 
 import styles from './Playlist.module.scss';
 
@@ -25,7 +26,7 @@ function Playlist({
   },
 }: RouteComponentProps<PlaylistRouteParams>) {
   const history = useHistory();
-  const config: Config = useContext(ConfigContext);
+  const config = ConfigStore.useState((state) => state.config);
   const { isLoading, isPlaceholderData, error, data: { title, playlist } = { title: '', playlist: [] } } = usePlaylist(id);
 
   const [filter, setFilter] = useState<string>('');
@@ -34,6 +35,9 @@ function Playlist({
   const filteredPlaylist = useMemo(() => filterPlaylist(playlist, filter), [playlist, filter]);
   const updateBlurImage = useBlurImageUpdater(filteredPlaylist);
 
+  const hasActiveSubscription = !!AccountStore.useState((state) => state.subscription);
+  const requiresSubscription = !!config.cleengId && configHasCleengOffer(config);
+
   useEffect(() => {
     // reset filter when the playlist id changes
     setFilter('');
@@ -66,6 +70,8 @@ function Playlist({
           onCardHover={onCardHover}
           isLoading={isLoading}
           enableCardTitles={config.options.shelveTitles}
+          hasActiveSubscription={hasActiveSubscription}
+          requiresSubscription={requiresSubscription}
         />
       </main>
     </div>
diff --git a/src/screens/Search/Search.tsx b/src/screens/Search/Search.tsx
index 7ec121025..de7ab1199 100644
--- a/src/screens/Search/Search.tsx
+++ b/src/screens/Search/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
@@ -10,10 +10,12 @@ import useSearchQueryUpdater from '../../hooks/useSearchQueryUpdater';
 import ErrorPage from '../../components/ErrorPage/ErrorPage';
 import type { PlaylistItem } from '../../../types/playlist';
 import CardGrid from '../../components/CardGrid/CardGrid';
-import { ConfigContext } from '../../providers/ConfigProvider';
 import { cardUrl } from '../../utils/formatting';
 import useFirstRender from '../../hooks/useFirstRender';
 import useSearchPlaylist from '../../hooks/useSearchPlaylist';
+import { AccountStore } from '../../stores/AccountStore';
+import { ConfigStore } from '../../stores/ConfigStore';
+import { configHasCleengOffer } from '../../utils/cleeng';
 
 import styles from './Search.module.scss';
 
@@ -27,7 +29,8 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
   },
 }) => {
   const { t } = useTranslation('search');
-  const { siteName, searchPlaylist, options } = useContext(ConfigContext);
+  const config = ConfigStore.useState((state) => state.config);
+  const { siteName, searchPlaylist, options } = config;
   const firstRender = useFirstRender();
   const searchQuery = UIStore.useState((s) => s.searchQuery);
   const { updateSearchQuery } = useSearchQueryUpdater();
@@ -36,6 +39,9 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
 
   const updateBlurImage = useBlurImageUpdater(playlist);
 
+  const hasActiveSubscription = !!AccountStore.useState((state) => state.subscription);
+  const requiresSubscription = !!config.cleengId && configHasCleengOffer(config);
+
   // Update the search bar query to match the route param on mount
   useEffect(() => {
     if (!firstRender) {
@@ -100,6 +106,8 @@ const Search: React.FC<RouteComponentProps<SearchRouteParams>> = ({
           onCardHover={onCardHover}
           isLoading={firstRender}
           enableCardTitles={options.shelveTitles}
+          hasActiveSubscription={hasActiveSubscription}
+          requiresSubscription={requiresSubscription}
         />
       </main>
     </div>
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index 235a4bf5d..ef54117d1 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -92,7 +92,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   });
   const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
   const subscriptions = subscriptionsResult?.responseData?.items;
-  const hasActiveSubscription = subscriptions?.find(
+  const hasActiveSubscription = !!subscriptions?.find(
     (subscription: Subscription) => subscription.status === 'active' || subscription.status === 'cancelled',
   );
   const allowedToWatch = useMemo<boolean>(
@@ -236,6 +236,8 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
             currentCardItem={item}
             currentCardLabel={t('current_episode')}
             enableCardTitles={options.shelveTitles}
+            hasActiveSubscription={hasActiveSubscription}
+            requiresSubscription={!!cleengId && configHasOffer}
           />
         </>
       </VideoComponent>

From 3962ab11eb26ed639d63c5f0533ba4cca413e5f8 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Fri, 30 Jul 2021 17:27:06 +0200
Subject: [PATCH 07/28] refactor(project): fix failing tests

---
 src/components/CardGrid/CardGrid.test.tsx | 9 ++++++++-
 src/components/Favorites/Favorites.tsx    | 2 ++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/CardGrid/CardGrid.test.tsx b/src/components/CardGrid/CardGrid.test.tsx
index a699687fa..7460f8ae6 100644
--- a/src/components/CardGrid/CardGrid.test.tsx
+++ b/src/components/CardGrid/CardGrid.test.tsx
@@ -9,7 +9,14 @@ describe('<CardGrid>', () => {
   it('renders and matches snapshot', () => {
     const placeholderData = generatePlaylistPlaceholder();
     const { container } = render(
-      <CardGrid playlist={placeholderData.playlist} onCardHover={jest.fn()} onCardClick={jest.fn()} isLoading={false} />,
+      <CardGrid
+        playlist={placeholderData.playlist}
+        onCardHover={jest.fn()}
+        onCardClick={jest.fn()}
+        isLoading={false}
+        hasActiveSubscription={true}
+        requiresSubscription={true}
+      />,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/src/components/Favorites/Favorites.tsx b/src/components/Favorites/Favorites.tsx
index bb5634169..70c8a93e8 100644
--- a/src/components/Favorites/Favorites.tsx
+++ b/src/components/Favorites/Favorites.tsx
@@ -52,6 +52,8 @@ const Favorites = ({ playlist, error, isLoading, onCardClick, onCardHover, onCle
         cols={cols}
         isLoading={isLoading}
         enableCardTitles={config.options.shelveTitles}
+        hasActiveSubscription={true}
+        requiresSubscription={true}
       />
     </div>
   );

From e5432bb3fa8e62458e331a8253277b463354bc69 Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Mon, 2 Aug 2021 10:05:50 +0200
Subject: [PATCH 08/28] chore(project): fix layout shift opening modal

---
 src/components/Modal/Modal.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 467ded325..f74daaf94 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
+import scrollbarSize from '../../utils/dom';
 import Fade from '../Animation/Fade/Fade';
 import Grow from '../Animation/Grow/Grow';
 
@@ -45,6 +46,8 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
       }
 
       // prevent scrolling under the modal
+
+      document.body.style.marginRight = `${scrollbarSize()}px`;
       document.body.style.overflowY = 'hidden';
 
       // focus the first element in the modal
@@ -59,7 +62,8 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
         appView.removeAttribute('aria-hidden');
       }
 
-      document.body.style.overflowY = '';
+      document.body.style.removeProperty('margin-right');
+      document.body.style.removeProperty('overflow-y');
 
       // restore last focussed element
       if (lastFocus.current) {

From d2c71e4b9e52b5e84b720ecdc036d5f1b78852ce Mon Sep 17 00:00:00 2001
From: Robin van Zanten <robin@videodock.com>
Date: Mon, 2 Aug 2021 10:07:43 +0200
Subject: [PATCH 09/28] chore(project): fixed missing translations

---
 src/i18n/locales/en_US/common.json | 2 ++
 src/i18n/locales/nl_NL/common.json | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/i18n/locales/en_US/common.json b/src/i18n/locales/en_US/common.json
index d7cf84203..96fc22ad2 100644
--- a/src/i18n/locales/en_US/common.json
+++ b/src/i18n/locales/en_US/common.json
@@ -7,6 +7,8 @@
   "live": "LIVE",
   "optional": "(Optional)",
   "play_item": "Play {{ title }}",
+  "sign_in": "Sign in",
+  "sign_up": "Sign up",
   "slide_left": "Slide left",
   "slide_right": "Slide right"
 }
diff --git a/src/i18n/locales/nl_NL/common.json b/src/i18n/locales/nl_NL/common.json
index 70f47ba08..1652b0650 100644
--- a/src/i18n/locales/nl_NL/common.json
+++ b/src/i18n/locales/nl_NL/common.json
@@ -7,6 +7,8 @@
   "live": "",
   "optional": "",
   "play_item": "",
+  "sign_in": "",
+  "sign_up": "",
   "slide_left": "",
   "slide_right": ""
 }

From b8f5258ddb47f44fd26c89bb6bad96e41044819c Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 11:09:34 +0200
Subject: [PATCH 10/28] refactor(videodetail): remove unnecessary subscription
 query

---
 src/screens/Movie/Movie.tsx   | 28 +++++++---------------------
 src/screens/Series/Series.tsx | 28 +++++++---------------------
 2 files changed, 14 insertions(+), 42 deletions(-)

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index 33ebd17ec..8e9dd8201 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -3,7 +3,6 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
 
 import { useFavorites } from '../../stores/FavoritesStore';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
@@ -22,8 +21,6 @@ import { VideoProgressMinMax } from '../../config';
 import { ConfigStore } from '../../stores/ConfigStore';
 import { AccountStore } from '../../stores/AccountStore';
 import { configHasCleengOffer } from '../../utils/cleeng';
-import type { Subscription } from '../../../types/subscription';
-import { getSubscriptions } from '../../services/subscription.service';
 
 import styles from './Movie.module.scss';
 
@@ -41,7 +38,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   // Config
   const config = ConfigStore.useState((s) => s.config);
-  const { cleengId, options, recommendationsPlaylist, siteName, cleengSandbox } = config;
+  const { cleengId, options, recommendationsPlaylist, siteName } = config;
   const configHasOffer = configHasCleengOffer(config);
   const posterFading: boolean = options?.posterFading === true;
   const enableSharing: boolean = options?.enableSharing === true;
@@ -72,20 +69,10 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   // User
   const user = AccountStore.useState((state) => state.user);
-  const auth = AccountStore.useState((state) => state.auth);
-  const jwt = auth?.jwt || '';
-  const customerId = user?.id || -1; // id must be number
-  const getSubscriptionsQuery = useQuery(['subscriptions', customerId], () => getSubscriptions({ customerId }, cleengSandbox, jwt), {
-    enabled: !!user,
-  });
-  const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
-  const subscriptions = subscriptionsResult?.responseData?.items;
-  const hasActiveSubscription = !!subscriptions?.find(
-    (subscription: Subscription) => subscription.status === 'active' || subscription.status === 'cancelled',
-  );
+  const subscription = AccountStore.useState((state) => state.subscription);
   const allowedToWatch = useMemo<boolean>(
-    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!hasActiveSubscription)),
-    [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
+    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!subscription)),
+    [requiresSubscription, cleengId, user, configHasOffer, subscription],
   );
 
   // Handlers
@@ -114,8 +101,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   const formatStartWatchingLabel = (): string => {
     if (!user) return t('sign_up_to_start_watching');
-    if (!subscriptions?.length) return t('complete_your_subscription');
-    if (!hasActiveSubscription) return t('renew_your_subscription');
+    if (!subscription) return t('complete_your_subscription');
     return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
@@ -139,7 +125,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   }, [id]);
 
   // UI
-  if ((isLoading && !item) || isSubscriptionsLoading) return <LoadingOverlay />;
+  if (isLoading && !item) return <LoadingOverlay />;
   if ((!isLoading && error) || !item) return <ErrorPage title="Video not found!" />;
 
   const pageTitle = `${item.title} - ${siteName}`;
@@ -205,7 +191,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
               currentCardItem={item}
               currentCardLabel={t('currently_playing')}
               enableCardTitles={options.shelveTitles}
-              hasActiveSubscription={hasActiveSubscription}
+              hasActiveSubscription={!!subscription}
               requiresSubscription={!!cleengId && configHasOffer}
             />
           </>
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index ef54117d1..49e73e5e5 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -3,7 +3,6 @@ import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
 
 import CardGrid from '../../components/CardGrid/CardGrid';
 import { useFavorites } from '../../stores/FavoritesStore';
@@ -24,8 +23,6 @@ import { VideoProgressMinMax } from '../../config';
 import { ConfigStore } from '../../stores/ConfigStore';
 import { configHasCleengOffer } from '../../utils/cleeng';
 import { AccountStore } from '../../stores/AccountStore';
-import { getSubscriptions } from '../../services/subscription.service';
-import type { Subscription } from '../../../types/subscription';
 
 import styles from './Series.module.scss';
 
@@ -44,7 +41,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   // Config
   const config = ConfigStore.useState((s) => s.config);
-  const { cleengId, options, siteName, cleengSandbox } = config;
+  const { cleengId, options, siteName } = config;
   const configHasOffer = configHasCleengOffer(config);
   const posterFading: boolean = options?.posterFading === true;
   const enableSharing: boolean = options?.enableSharing === true;
@@ -84,20 +81,10 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   // User
   const user = AccountStore.useState((state) => state.user);
-  const auth = AccountStore.useState((state) => state.auth);
-  const jwt = auth?.jwt || '';
-  const customerId = user?.id || -1; // id must be number
-  const getSubscriptionsQuery = useQuery(['subscriptions', customerId], () => getSubscriptions({ customerId }, cleengSandbox, jwt), {
-    enabled: !!user,
-  });
-  const { data: subscriptionsResult, isLoading: isSubscriptionsLoading } = getSubscriptionsQuery;
-  const subscriptions = subscriptionsResult?.responseData?.items;
-  const hasActiveSubscription = !!subscriptions?.find(
-    (subscription: Subscription) => subscription.status === 'active' || subscription.status === 'cancelled',
-  );
+  const subscription = AccountStore.useState((state) => state.subscription);
   const allowedToWatch = useMemo<boolean>(
-    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!hasActiveSubscription)),
-    [requiresSubscription, cleengId, user, configHasOffer, hasActiveSubscription],
+    () => !requiresSubscription || !cleengId || (!!user && (!configHasOffer || !!subscription)),
+    [requiresSubscription, cleengId, user, configHasOffer, subscription],
   );
 
   // Handlers
@@ -126,8 +113,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   const formatStartWatchingLabel = (): string => {
     if (!user) return t('sign_up_to_start_watching');
-    if (!subscriptions?.length) return t('complete_your_subscription');
-    if (!hasActiveSubscription) return t('renew_your_subscription');
+    if (!subscription) return t('complete_your_subscription');
     return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
@@ -157,7 +143,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   }, [history, searchParams, seriesPlaylist]);
 
   // UI
-  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e') || isSubscriptionsLoading) return <LoadingOverlay />;
+  if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
   if ((!isLoading && error) || !item) return <ErrorPage title="Episode not found!" />;
   if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
 
@@ -236,7 +222,7 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
             currentCardItem={item}
             currentCardLabel={t('current_episode')}
             enableCardTitles={options.shelveTitles}
-            hasActiveSubscription={hasActiveSubscription}
+            hasActiveSubscription={!!subscription}
             requiresSubscription={!!cleengId && configHasOffer}
           />
         </>

From eb35cc3fc79aac0f399f136205fe063ed1418fea Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 11:18:13 +0200
Subject: [PATCH 11/28] feat(user): redirect to home when user is not logged in

---
 src/screens/User/User.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index a1bf9029c..ced45ae95 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -21,6 +21,7 @@ import Exit from '../../icons/Exit';
 import { useFavorites } from '../../stores/FavoritesStore';
 import { AccountStore } from '../../stores/AccountStore';
 import { addQueryParam } from '../../utils/history';
+import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 
 import styles from './User.module.scss';
 
@@ -29,7 +30,7 @@ const User = (): JSX.Element => {
   const { t } = useTranslation('user');
   const breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
-  const { user: customer, subscription } = AccountStore.useState((state) => state);
+  const { user: customer, subscription, loading } = AccountStore.useState((state) => state);
 
   const updateBlurImage = useBlurImageUpdater();
   const { clearList: clearFavorites } = useFavorites();
@@ -51,8 +52,14 @@ const User = (): JSX.Element => {
 
   useEffect(() => updateBlurImage(''), [updateBlurImage]);
 
+  useEffect(() => {
+    if (!loading && !customer) {
+      history.replace('/');
+    }
+  }, [history, customer, loading]);
+
   if (!customer) {
-    return <div className={styles.user}>Please login first</div>;
+    return <div className={styles.user}><LoadingOverlay inline /></div>;
   }
 
   return (

From ce0da5ce7d51341f8a7ac9eb231e0e2bdace2de2 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 11:19:03 +0200
Subject: [PATCH 12/28] feat(user): show empty favorites screen

---
 src/components/Favorites/Favorites.tsx        | 22 +++++++++++--------
 src/containers/Playlist/PlaylistContainer.tsx | 13 ++++++-----
 src/i18n/locales/en_US/user.json              |  1 +
 src/i18n/locales/nl_NL/user.json              |  1 +
 src/screens/User/User.tsx                     |  2 +-
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/Favorites/Favorites.tsx b/src/components/Favorites/Favorites.tsx
index bb5634169..68c0797e7 100644
--- a/src/components/Favorites/Favorites.tsx
+++ b/src/components/Favorites/Favorites.tsx
@@ -43,16 +43,20 @@ const Favorites = ({ playlist, error, isLoading, onCardClick, onCardHover, onCle
     <div>
       <div className={styles.header}>
         <h3>{t('favorites.title')}</h3>
-        <Button label={t('favorites.clear')} onClick={onClearFavoritesClick} />
+        {playlist.length > 0 ? <Button label={t('favorites.clear')} onClick={onClearFavoritesClick} /> : null}
       </div>
-      <CardGrid
-        playlist={playlist}
-        onCardClick={onCardClick}
-        onCardHover={onCardHover}
-        cols={cols}
-        isLoading={isLoading}
-        enableCardTitles={config.options.shelveTitles}
-      />
+      {playlist.length > 0 ? (
+        <CardGrid
+          playlist={playlist}
+          onCardClick={onCardClick}
+          onCardHover={onCardHover}
+          cols={cols}
+          isLoading={isLoading}
+          enableCardTitles={config.options.shelveTitles}
+        />
+      ) : (
+        <p>{t('favorites.no_favorites')}</p>
+      )}
     </div>
   );
 };
diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
index b55487e28..d6d20e4a7 100644
--- a/src/containers/Playlist/PlaylistContainer.tsx
+++ b/src/containers/Playlist/PlaylistContainer.tsx
@@ -20,9 +20,10 @@ type Props = {
   onPlaylistUpdate?: (playlist: Playlist) => void;
   children: (childrenParams: ChildrenParams) => JSX.Element;
   style?: React.CSSProperties;
+  showEmpty?: boolean;
 };
 
-const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, children }: Props): JSX.Element | null => {
+const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, children, showEmpty = false }: Props): JSX.Element | null => {
   const isAlternativeShelf = PersonalShelves.includes(playlistId as PersonalShelf);
   const {
     isLoading,
@@ -32,10 +33,10 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, c
 
   let playlist = fetchedPlaylist;
 
-  const { getPlaylist: getFavoritesPlayist } = useFavorites();
-  const favoritesPlaylist = getFavoritesPlayist();
-  const { getPlaylist: getWatchHistoryPlayist } = useWatchHistory();
-  const watchHistoryPlaylist = getWatchHistoryPlayist();
+  const { getPlaylist: getFavoritesPlaylist } = useFavorites();
+  const favoritesPlaylist = getFavoritesPlaylist();
+  const { getPlaylist: getWatchHistoryPlaylist } = useWatchHistory();
+  const watchHistoryPlaylist = getWatchHistoryPlaylist();
 
   useEffect(() => {
     if (playlist && onPlaylistUpdate) onPlaylistUpdate(playlist);
@@ -45,7 +46,7 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, c
   if (playlistId === PersonalShelf.ContinueWatching) playlist = watchHistoryPlaylist;
 
   if (!playlistId) return <p>No playlist id</p>;
-  if (!playlist.playlist.length) {
+  if (!playlist.playlist.length && !showEmpty) {
     return null;
   }
 
diff --git a/src/i18n/locales/en_US/user.json b/src/i18n/locales/en_US/user.json
index bd2821c0f..7781c2ecb 100644
--- a/src/i18n/locales/en_US/user.json
+++ b/src/i18n/locales/en_US/user.json
@@ -20,6 +20,7 @@
   },
   "favorites": {
     "clear": "Clear favorites",
+    "no_favorites": "Your favorites are empty",
     "not_found": "Favorites not found!",
     "title": "Favorites"
   },
diff --git a/src/i18n/locales/nl_NL/user.json b/src/i18n/locales/nl_NL/user.json
index 479161803..0a00c4dc0 100644
--- a/src/i18n/locales/nl_NL/user.json
+++ b/src/i18n/locales/nl_NL/user.json
@@ -20,6 +20,7 @@
   },
   "favorites": {
     "clear": "",
+    "no_favorites": "",
     "not_found": "",
     "title": ""
   },
diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index ced45ae95..75a773a9a 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -119,7 +119,7 @@ const User = (): JSX.Element => {
             </AccountContainer>
           </Route>
           <Route path="/u/favorites">
-            <PlaylistContainer playlistId={PersonalShelf.Favorites}>
+            <PlaylistContainer playlistId={PersonalShelf.Favorites} showEmpty>
               {({ playlist, error, isLoading }) => (
                 <Favorites
                   playlist={playlist.playlist}

From 2e920ebea8f3a3ac31322f23611485189a175c26 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 11:27:41 +0200
Subject: [PATCH 13/28] feat(project): implement logout

---
 src/screens/User/User.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index a1bf9029c..9f871b9b2 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
+import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
 import type { PlaylistItem } from 'types/playlist';
 import { useTranslation } from 'react-i18next';
 
@@ -19,13 +19,14 @@ import Favorite from '../../icons/Favorite';
 import BalanceWallet from '../../icons/BalanceWallet';
 import Exit from '../../icons/Exit';
 import { useFavorites } from '../../stores/FavoritesStore';
-import { AccountStore } from '../../stores/AccountStore';
+import { AccountStore, logout } from '../../stores/AccountStore';
 import { addQueryParam } from '../../utils/history';
 
 import styles from './User.module.scss';
 
 const User = (): JSX.Element => {
   const history = useHistory();
+  const location = useLocation();
   const { t } = useTranslation('user');
   const breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
@@ -51,6 +52,13 @@ const User = (): JSX.Element => {
 
   useEffect(() => updateBlurImage(''), [updateBlurImage]);
 
+  useEffect(() => {
+    if (location.pathname === '/u/logout') {
+      logout();
+      history.push('/');
+    }
+  }, [location, history]);
+
   if (!customer) {
     return <div className={styles.user}>Please login first</div>;
   }

From 420180362251ca05d6f2bb7f83b79407c6e4e4f7 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 11:36:11 +0200
Subject: [PATCH 14/28] refactor(project): add page refresh after logout

---
 src/screens/User/User.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index 9f871b9b2..385da5477 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -56,6 +56,7 @@ const User = (): JSX.Element => {
     if (location.pathname === '/u/logout') {
       logout();
       history.push('/');
+      history.go(0);
     }
   }, [location, history]);
 

From 6d28b91a6944bc007144cccc5031aa63df85454f Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 11:57:32 +0200
Subject: [PATCH 15/28] feat(user): add loadingoverlay while logging in

---
 src/components/LoginForm/LoginForm.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
index f33b30db0..d086eacb5 100644
--- a/src/components/LoginForm/LoginForm.tsx
+++ b/src/components/LoginForm/LoginForm.tsx
@@ -13,6 +13,7 @@ import IconButton from '../IconButton/IconButton';
 import Visibility from '../../icons/Visibility';
 import VisibilityOff from '../../icons/VisibilityOff';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './LoginForm.module.scss';
 
@@ -61,6 +62,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
         }
         required
       />
+      {submitting && <LoadingOverlay transparentBackground inline />}
       <Link className={styles.link} to={addQueryParam(history, 'u', 'forgot-password')}>
         {t('login.forgot_password')}
       </Link>

From 2ce1404bdd729cce164943a55b74bf33481ca9dc Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 12:07:17 +0200
Subject: [PATCH 16/28] refactor(user): implement smooth logout transition

---
 src/screens/User/User.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index 385da5477..2dd171a80 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -21,6 +21,7 @@ import Exit from '../../icons/Exit';
 import { useFavorites } from '../../stores/FavoritesStore';
 import { AccountStore, logout } from '../../stores/AccountStore';
 import { addQueryParam } from '../../utils/history';
+import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 
 import styles from './User.module.scss';
 
@@ -56,7 +57,6 @@ const User = (): JSX.Element => {
     if (location.pathname === '/u/logout') {
       logout();
       history.push('/');
-      history.go(0);
     }
   }, [location, history]);
 
@@ -88,6 +88,9 @@ const User = (): JSX.Element => {
       )}
       <div className={styles.mainColumn}>
         <Switch>
+          <Route path="/u/logout">
+            <LoadingOverlay transparentBackground />
+          </Route>
           <Route path="/u/my-account">
             <AccountContainer>
               {({

From a6d7d675c1007b15fcc55444507cd45f75570d3c Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 12:13:30 +0200
Subject: [PATCH 17/28] feat(project): update popover and close UserMenu after
 click

---
 src/components/Animation/Slide/Slide.tsx      | 15 +++++---
 .../DetectOutsideClick/DetectOutsideClick.tsx | 36 ++++++++++---------
 src/components/Header/Header.tsx              |  4 +--
 src/components/MenuButton/MenuButton.tsx      |  9 ++++-
 src/components/Popover/Popover.tsx            | 18 +++++-----
 .../__snapshots__/Popover.test.tsx.snap       |  2 +-
 src/components/UserMenu/UserMenu.tsx          | 11 +++---
 7 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/components/Animation/Slide/Slide.tsx b/src/components/Animation/Slide/Slide.tsx
index f4a21db08..657721594 100644
--- a/src/components/Animation/Slide/Slide.tsx
+++ b/src/components/Animation/Slide/Slide.tsx
@@ -9,7 +9,7 @@ type Props = {
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;
   children: ReactNode;
-  fromRight?: boolean;
+  direction?: 'left' | 'top' | 'right' | 'bottom';
 };
 
 const Slide = ({
@@ -19,13 +19,20 @@ const Slide = ({
   onOpenAnimationEnd,
   onCloseAnimationEnd,
   children,
-  fromRight,
+  direction = 'top',
 }: Props): JSX.Element | null => {
   const seconds = duration / 1000;
-  const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform;
+  const transition = `transform ${seconds}s ease, opacity ${seconds}s ease`; // todo: -webkit-transform;
+  const directions = {
+    left: 'translate(-15px, 0)',
+    top: 'translate(0, -15px)',
+    right: 'translate(15px, 0)',
+    bottom: 'translate(0, 15px)',
+  };
   const createStyle = (status: Status): CSSProperties => ({
     transition,
-    transform: status === 'opening' || status === 'open' ? 'translateY(0)' : `${fromRight ? 'translateX(15px)' : 'translateY(15px)'}`,
+    transform: status === 'opening' || status === 'open' ? 'translate(0, 0)' : directions[direction],
+    opacity: status === 'opening' || status === 'open' ? 1 : 0,
     zIndex: 15,
   });
 
diff --git a/src/components/DetectOutsideClick/DetectOutsideClick.tsx b/src/components/DetectOutsideClick/DetectOutsideClick.tsx
index 0b22bbd53..bd0dac0fd 100644
--- a/src/components/DetectOutsideClick/DetectOutsideClick.tsx
+++ b/src/components/DetectOutsideClick/DetectOutsideClick.tsx
@@ -1,32 +1,34 @@
-import React, { useEffect, RefObject } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 type Prop = {
-  el?: RefObject<HTMLDivElement>;
   callback: () => void;
-  isActive: boolean;
-  children: React.ReactNode;
+  children: React.ReactElement;
 };
 
-const DetectOutsideClick = ({ el, callback, isActive, children }: Prop) => {
+const DetectOutsideClick = ({ callback, children }: Prop) => {
+  const elementRef = useRef<HTMLDivElement>();
+
   useEffect(() => {
-    const onClick = (event: MouseEvent) => {
-      // If the active element exists and is clicked outside of
-      if (isActive && el?.current !== null && !el?.current?.contains(event.target as Node)) {
+    const handleClick = (event: MouseEvent) => {
+      if (!elementRef.current || !(event.target instanceof Node)) {
+        return;
+      }
+
+      if (elementRef.current !== event.target && !elementRef.current?.contains(event.target)) {
         callback();
       }
     };
 
-    // If the item is active (ie open) then listen for clicks outside
-    if (isActive) {
-      setTimeout(() => window.addEventListener('click', onClick), 0);
-    }
+    document.addEventListener('click', handleClick);
 
-    return () => {
-      window.removeEventListener('click', onClick);
-    };
-  }, [isActive, el, callback]);
+    return () => document.removeEventListener('click', handleClick);
+  }, [callback]);
 
-  return <React.Fragment>{children}</React.Fragment>;
+  return React.cloneElement(children, {
+    ref: (node: HTMLDivElement) => {
+      elementRef.current = node;
+    },
+  });
 };
 
 export default DetectOutsideClick;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d4e58f7f2..121e61153 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -93,14 +93,14 @@ const Header: React.FC<Props> = ({
     );
 
   const userActions =
-    breakpoint >= Breakpoint.sm ? (
+    breakpoint > Breakpoint.sm ? (
       isLoggedIn ? (
         <React.Fragment>
           <IconButton className={styles.iconButton} aria-label={t('open_user_menu')} onClick={() => toggleUserMenu(!userMenuOpen)}>
             <AccountCircle />
           </IconButton>
           <Popover isOpen={userMenuOpen} onClose={() => toggleUserMenu(false)}>
-            <UserMenu inPopover />
+            <UserMenu onClick={() => toggleUserMenu(false)} inPopover />
           </Popover>
         </React.Fragment>
       ) : (
diff --git a/src/components/MenuButton/MenuButton.tsx b/src/components/MenuButton/MenuButton.tsx
index 16be091f2..cb1723a26 100644
--- a/src/components/MenuButton/MenuButton.tsx
+++ b/src/components/MenuButton/MenuButton.tsx
@@ -19,7 +19,14 @@ const MenuButton: React.FC<Props> = ({ label, to, onClick, tabIndex = 0, active
 
   if (to) {
     return (
-      <NavLink className={classNames(styles.menuButton, { [styles.small]: small })} activeClassName={styles.active} to={to} tabIndex={tabIndex} exact>
+      <NavLink
+        className={classNames(styles.menuButton, { [styles.small]: small })}
+        onClick={onClick}
+        activeClassName={styles.active}
+        to={to}
+        tabIndex={tabIndex}
+        exact
+      >
         {icon}
         <span className={styles.label}>{label}</span>
       </NavLink>
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 24ec5ece9..375f9ffc9 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 
 import DetectOutsideClick from '../DetectOutsideClick/DetectOutsideClick';
@@ -13,17 +13,15 @@ type Props = {
 };
 
 const Popover: React.FC<Props> = ({ children, isOpen, onClose }: Props) => {
-  const popoverRef = useRef<HTMLDivElement>(null);
-
-  return isOpen ? (
-    <DetectOutsideClick isActive={isOpen} callback={onClose} el={popoverRef}>
-      <Slide open={isOpen} duration={300} onCloseAnimationEnd={() => onClose()} fromRight>
-        <div ref={popoverRef} className={classNames(styles.popover)}>
+  return (
+    <Slide open={isOpen} duration={250} direction="right">
+      <DetectOutsideClick callback={onClose}>
+        <div className={classNames(styles.popover)}>
           {children}
         </div>
-      </Slide>
-    </DetectOutsideClick>
-  ) : null;
+      </DetectOutsideClick>
+    </Slide>
+  );
 };
 
 export default Popover;
diff --git a/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
index 8d66c4593..31c17f58f 100644
--- a/src/components/Popover/__snapshots__/Popover.test.tsx.snap
+++ b/src/components/Popover/__snapshots__/Popover.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Popover> renders and matches snapshot 1`] = `
 <div>
   <div
-    style="transition: transform 0.3s ease-out; transform: translateX(15px); z-index: 15;"
+    style="transition: transform 0.25s ease, opacity 0.25s ease; transform: translate(15px, 0); opacity: 0; z-index: 15;"
   >
     <div
       class="popover"
diff --git a/src/components/UserMenu/UserMenu.tsx b/src/components/UserMenu/UserMenu.tsx
index f9a808cee..8044525cc 100644
--- a/src/components/UserMenu/UserMenu.tsx
+++ b/src/components/UserMenu/UserMenu.tsx
@@ -12,25 +12,26 @@ import styles from './UserMenu.module.scss';
 
 type Props = {
   inPopover?: boolean;
+  onClick?: () => void;
 };
 
-const UserMenu = ({ inPopover = false }: Props) => {
+const UserMenu = ({ inPopover = false, onClick }: Props) => {
   const { t } = useTranslation('user');
 
   const menuItems = (
     <ul className={styles.menuItems}>
       <li>
-        <MenuButton small={inPopover} to="/u/my-account" label={t('nav.account')} startIcon={<AccountCircle />} />
+        <MenuButton small={inPopover} onClick={onClick} to="/u/my-account" label={t('nav.account')} startIcon={<AccountCircle />} />
       </li>
       <li>
-        <MenuButton small={inPopover} to="/u/favorites" label={t('nav.favorites')} startIcon={<Favorite />} />
+        <MenuButton small={inPopover} onClick={onClick} to="/u/favorites" label={t('nav.favorites')} startIcon={<Favorite />} />
       </li>
       <li>
-        <MenuButton small={inPopover} to="/u/payments" label={t('nav.payments')} startIcon={<BalanceWallet />} />
+        <MenuButton small={inPopover} onClick={onClick} to="/u/payments" label={t('nav.payments')} startIcon={<BalanceWallet />} />
       </li>
       <hr className={classNames(styles.divider, { [styles.inPopover]: inPopover })} />
       <li>
-        <MenuButton small={inPopover} to="/u/logout" label={t('nav.logout')} startIcon={<Exit />} />
+        <MenuButton small={inPopover} onClick={onClick} to="/u/logout" label={t('nav.logout')} startIcon={<Exit />} />
       </li>
     </ul>
   );

From 2facbf9d4f33a2a7bd144855a893d3d5c01b7eb9 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 12:16:10 +0200
Subject: [PATCH 18/28] fix(project): remove optional label for non editing
 text field

---
 .../Account/__snapshots__/Account.test.tsx.snap        |  9 ---------
 src/components/DateField/DateField.tsx                 | 10 +++++-----
 src/components/TextField/TextField.tsx                 |  2 +-
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
index faff1d1b4..89074a544 100644
--- a/src/components/Account/__snapshots__/Account.test.tsx.snap
+++ b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -22,9 +22,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
             for="text-field_1235_email"
           >
             account.email
-            <span>
-              optional
-            </span>
           </label>
           <p>
             email@domain.com
@@ -85,9 +82,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
               for="text-field_1235_firstName"
             >
               account.firstname
-              <span>
-                optional
-              </span>
             </label>
             <p>
               John
@@ -101,9 +95,6 @@ exports[`<Account> renders and matches snapshot 1`] = `
               for="text-field_1235_lastName"
             >
               account.lastname
-              <span>
-                optional
-              </span>
             </label>
             <p>
               Doe
diff --git a/src/components/DateField/DateField.tsx b/src/components/DateField/DateField.tsx
index a1538713e..b799bd76d 100644
--- a/src/components/DateField/DateField.tsx
+++ b/src/components/DateField/DateField.tsx
@@ -12,7 +12,7 @@ type Props = {
   placeholder?: string;
   name?: string;
   value: string;
-  format?: string,
+  format?: string;
   onChange?: (dateString: string) => void;
   onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
@@ -70,10 +70,10 @@ const DateField: React.FC<Props> = ({ className, label, error, helperText, value
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
 
-    setDate(current => {
-      const date = name === 'date' ?  getNewValue(value, 1, 31) : current.date;
-      const month = name === 'month' ?  getNewValue(value, 1, 12) : current.month;
-      const year = name === 'year' ?  getNewValue(value).slice(0, 4) : current.year;
+    setDate((current) => {
+      const date = name === 'date' ? getNewValue(value, 1, 31) : current.date;
+      const month = name === 'month' ? getNewValue(value, 1, 12) : current.month;
+      const year = name === 'year' ? getNewValue(value).slice(0, 4) : current.year;
 
       if (onChange) {
         onChange(date && month && year ? format.replace('YYYY', year).replace('MM', month).replace('DD', date) : '');
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index 6531cfc09..d031abddf 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -70,7 +70,7 @@ const TextField: React.FC<Props> = ({
     <div className={textFieldClassName}>
       <label htmlFor={id} className={styles.label}>
         {label}
-        {!rest.required ? <span>{t('optional')}</span> : null}
+        {!rest.required && editing ? <span>{t('optional')}</span> : null}
       </label>
       {editing ? (
         <div className={styles.container}>

From 3ba922afbfcf946210e0ea952884c09c60c5ae8d Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 13:01:17 +0200
Subject: [PATCH 19/28] feat(project): add loadingoverlay to all forms

---
 .../CancelSubscriptionForm.tsx                |  4 +-
 src/components/CheckoutForm/CheckoutForm.tsx  |  4 +
 .../ChooseOfferForm/ChooseOfferForm.tsx       |  2 +
 .../EditPasswordForm/EditPasswordForm.tsx     |  2 +
 .../PersonalDetailsForm.tsx                   |  4 +-
 .../RegistrationForm/RegistrationForm.tsx     |  2 +
 .../RenewSubscriptionForm.tsx                 |  4 +-
 .../ResetPasswordForm/ResetPasswordForm.tsx   |  5 +-
 .../AccountModal/forms/CancelSubscription.tsx | 10 +--
 .../AccountModal/forms/Checkout.tsx           | 89 ++++++++++---------
 .../AccountModal/forms/RenewSubscription.tsx  | 17 ++--
 .../AccountModal/forms/ResetPassword.tsx      | 11 ++-
 12 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
index c4fe4a49c..aae94d0a2 100644
--- a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
+++ b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.tsx
@@ -10,9 +10,10 @@ type Props = {
   onConfirm: () => void;
   onCancel: () => void;
   error: string | null;
+  submitting: boolean;
 };
 
-const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error }: Props) => {
+const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error, submitting }: Props) => {
   const { t } = useTranslation('account');
 
   return (
@@ -27,6 +28,7 @@ const CancelSubscriptionForm: React.FC<Props> = ({ onConfirm, onCancel, error }:
         variant="contained"
         onClick={onConfirm}
         fullWidth
+        disabled={submitting}
       />
       <Button label={t('cancel_subscription.no_thanks')} variant="outlined" onClick={onCancel} fullWidth />
     </div>
diff --git a/src/components/CheckoutForm/CheckoutForm.tsx b/src/components/CheckoutForm/CheckoutForm.tsx
index 383dc35d9..46508cb40 100644
--- a/src/components/CheckoutForm/CheckoutForm.tsx
+++ b/src/components/CheckoutForm/CheckoutForm.tsx
@@ -10,6 +10,7 @@ import Close from '../../icons/Close';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import PayPal from '../../icons/PayPal';
 import CreditCard from '../../icons/CreditCard';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './CheckoutForm.module.scss';
 
@@ -30,6 +31,7 @@ type Props = {
   order: Order;
   offer: Offer;
   renderPaymentMethod?: () => JSX.Element | null;
+  submitting: boolean;
 };
 
 const CheckoutForm: React.FC<Props> = ({
@@ -49,6 +51,7 @@ const CheckoutForm: React.FC<Props> = ({
   onCouponFormSubmit,
   onRedeemCouponButtonClick,
   renderPaymentMethod,
+  submitting,
 }) => {
   const { t } = useTranslation('account');
 
@@ -178,6 +181,7 @@ const CheckoutForm: React.FC<Props> = ({
         </div>
       ) : null}
       <div className={styles.paymentDetails}>{renderPaymentMethod ? renderPaymentMethod() : null}</div>
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </div>
   );
 };
diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
index 49ec72828..e80daf05b 100644
--- a/src/components/ChooseOfferForm/ChooseOfferForm.tsx
+++ b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -10,6 +10,7 @@ import FormFeedback from '../FormFeedback/FormFeedback';
 import { getOfferPrice } from '../../utils/subscription';
 import DialogBackButton from '../DialogBackButton/DialogBackButton';
 import type { FormErrors } from '../../../types/form';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './ChooseOfferForm.module.scss';
 
@@ -129,6 +130,7 @@ const ChooseOfferForm: React.FC<Props> = ({
           </div>
         ) : null}
       </div>
+      {submitting && <LoadingOverlay transparentBackground inline />}
       <Button label={t('choose_offer.continue')} disabled={submitting} variant="contained" color="primary" type="submit" fullWidth />
     </form>
   );
diff --git a/src/components/EditPasswordForm/EditPasswordForm.tsx b/src/components/EditPasswordForm/EditPasswordForm.tsx
index 0bf93ef50..fc0f7394b 100644
--- a/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -11,6 +11,7 @@ import Visibility from '../../icons/Visibility';
 import VisibilityOff from '../../icons/VisibilityOff';
 import useToggle from '../../hooks/useToggle';
 import PasswordStrength from '../PasswordStrength/PasswordStrength';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './EditPasswordForm.module.scss';
 
@@ -49,6 +50,7 @@ const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors,
       />
       <PasswordStrength password={value.password} />
       <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.confirm')} />
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };
diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index f374fd51f..d2213f262 100644
--- a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -9,6 +9,7 @@ import Dropdown from '../Dropdown/Dropdown';
 import Checkbox from '../Checkbox/Checkbox';
 import Radio from '../Radio/Radio';
 import DateField from '../DateField/DateField';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './PersonalDetailsForm.module.scss';
 
@@ -172,7 +173,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
       {fields.birthDate?.enabled ? (
         <DateField
           value={values.birthDate}
-          onChange={value => setValue('birthDate', value)}
+          onChange={(value) => setValue('birthDate', value)}
           label={t('personal_details.birth_date')}
           placeholder={t('personal_details.birth_date')}
           error={!!errors.birthDate || !!errors.form}
@@ -192,6 +193,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
         disabled={submitting}
         fullWidth
       />
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };
diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx
index 87ee346ef..e56794878 100644
--- a/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/src/components/RegistrationForm/RegistrationForm.tsx
@@ -14,6 +14,7 @@ import VisibilityOff from '../../icons/VisibilityOff';
 import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import Checkbox from '../Checkbox/Checkbox';
 import Spinner from '../Spinner/Spinner';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -133,6 +134,7 @@ const RegistrationForm: React.FC<Props> = ({
           {t('login.sign_in')}
         </button>
       </div>
+      {submitting && <LoadingOverlay transparentBackground inline />}
     </form>
   );
 };
diff --git a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
index 0cba5ceca..f7e3215bb 100644
--- a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
+++ b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.tsx
@@ -13,11 +13,12 @@ type Props = {
   subscription: Subscription;
   customer: Customer;
   error: string | null;
+  submitting: boolean;
   onConfirm: () => void;
   onClose: () => void;
 };
 
-const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error, onConfirm, onClose }: Props) => {
+const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error, submitting, onConfirm, onClose }: Props) => {
   const { t } = useTranslation('account');
 
   return (
@@ -42,6 +43,7 @@ const RenewSubscriptionForm: React.FC<Props> = ({ subscription, customer, error,
         label={t('renew_subscription.renew_subscription')}
         onClick={onConfirm}
         fullWidth
+        disabled={submitting}
       />
       <Button label={t('renew_subscription.no_thanks')} onClick={onClose} fullWidth />
     </div>
diff --git a/src/components/ResetPasswordForm/ResetPasswordForm.tsx b/src/components/ResetPasswordForm/ResetPasswordForm.tsx
index 98f5d1579..5414f56e3 100644
--- a/src/components/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/src/components/ResetPasswordForm/ResetPasswordForm.tsx
@@ -8,15 +8,16 @@ import styles from './ResetPasswordForm.module.scss';
 type Props = {
   onCancel: () => void;
   onReset: () => void;
+  submitting: boolean;
 };
 
-const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset }: Props) => {
+const ResetPasswordForm: React.FC<Props> = ({ onCancel, onReset, submitting }: Props) => {
   const { t } = useTranslation('account');
   return (
     <div className={styles.resetPassword}>
       <h5 className={styles.title}>{t('reset.reset_password')}</h5>
       <p className={styles.text}>{t('reset.text')}</p>
-      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} />
+      <Button onClick={onReset} className={styles.button} fullWidth color="primary" label={t('reset.yes')} disabled={submitting} />
       <Button onClick={onCancel} fullWidth label={t('reset.no')} />
     </div>
   );
diff --git a/src/containers/AccountModal/forms/CancelSubscription.tsx b/src/containers/AccountModal/forms/CancelSubscription.tsx
index 7307f5cd0..b67aaaa8d 100644
--- a/src/containers/AccountModal/forms/CancelSubscription.tsx
+++ b/src/containers/AccountModal/forms/CancelSubscription.tsx
@@ -14,11 +14,11 @@ const CancelSubscription = () => {
   const history = useHistory();
   const subscription = AccountStore.useState((s) => s.subscription);
   const [cancelled, setCancelled] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const cancelSubscriptionConfirmHandler = async () => {
-    setLoading(true);
+    setSubmitting(true);
     setError(null);
 
     try {
@@ -28,7 +28,7 @@ const CancelSubscription = () => {
       setError(t('cancel_subscription.unknown_error_occurred'));
     }
 
-    setLoading(false);
+    setSubmitting(false);
   };
 
   const closeHandler = () => {
@@ -42,9 +42,9 @@ const CancelSubscription = () => {
       {cancelled ? (
         <SubscriptionCancelled expiresDate={formatDate(subscription.expiresAt)} onClose={closeHandler} />
       ) : (
-        <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} error={error} />
+        <CancelSubscriptionForm onConfirm={cancelSubscriptionConfirmHandler} onCancel={closeHandler} submitting={submitting} error={error} />
       )}
-      {loading ? <LoadingOverlay inline /> : null}
+      {submitting ? <LoadingOverlay transparentBackground inline /> : null}
     </React.Fragment>
   );
 };
diff --git a/src/containers/AccountModal/forms/Checkout.tsx b/src/containers/AccountModal/forms/Checkout.tsx
index c24b713ce..ed9fe843f 100644
--- a/src/containers/AccountModal/forms/Checkout.tsx
+++ b/src/containers/AccountModal/forms/Checkout.tsx
@@ -2,7 +2,15 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 
 import CheckoutForm from '../../../components/CheckoutForm/CheckoutForm';
-import { CheckoutStore, createOrder, updateOrder, getPaymentMethods, paymentWithoutDetails, adyenPayment, paypalPayment } from '../../../stores/CheckoutStore';
+import {
+  CheckoutStore,
+  createOrder,
+  updateOrder,
+  getPaymentMethods,
+  paymentWithoutDetails,
+  adyenPayment,
+  paypalPayment,
+} from '../../../stores/CheckoutStore';
 import { addQueryParam } from '../../../utils/history';
 import useForm from '../../../hooks/useForm';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
@@ -13,7 +21,7 @@ import { addQueryParams } from '../../../utils/formatting';
 
 const Checkout = () => {
   const history = useHistory();
-  const [paymentError, setPaymentError] = useState<string|undefined>(undefined);
+  const [paymentError, setPaymentError] = useState<string | undefined>(undefined);
   const [updatingOrder, setUpdatingOrder] = useState(false);
   const [couponFormOpen, setCouponFormOpen] = useState(false);
   const [couponCodeApplied, setCouponCodeApplied] = useState(false);
@@ -86,7 +94,7 @@ const Checkout = () => {
       setUpdatingOrder(true);
       setPaymentError(undefined);
       await paymentWithoutDetails();
-      history.replace(addQueryParam(history, 'u', 'welcome'))
+      history.replace(addQueryParam(history, 'u', 'welcome'));
     } catch (error: unknown) {
       if (error instanceof Error) {
         setPaymentError(error.message);
@@ -100,9 +108,9 @@ const Checkout = () => {
     try {
       setPaymentError(undefined);
       setUpdatingOrder(true);
-      const successUrl = addQueryParams(window.location.href, { 'u': 'welcome' });
-      const cancelUrl = addQueryParams(window.location.href, { 'u': 'paypal-cancelled' });
-      const errorUrl = addQueryParams(window.location.href, { 'u': 'paypal-error' });
+      const successUrl = addQueryParams(window.location.href, { u: 'welcome' });
+      const cancelUrl = addQueryParams(window.location.href, { u: 'paypal-cancelled' });
+      const errorUrl = addQueryParams(window.location.href, { u: 'paypal-error' });
       const response = await paypalPayment(successUrl, cancelUrl, errorUrl);
 
       if (response.redirectUrl) {
@@ -116,22 +124,25 @@ const Checkout = () => {
     setUpdatingOrder(false);
   };
 
-  const handleAdyenSubmit = useCallback(async (data: AdyenEventData) => {
-    if (!data.isValid) return;
+  const handleAdyenSubmit = useCallback(
+    async (data: AdyenEventData) => {
+      if (!data.isValid) return;
 
-    try {
-      setUpdatingOrder(true);
-      setPaymentError(undefined);
-      await adyenPayment(data.data.paymentMethod);
-      history.replace(addQueryParam(history, 'u', 'welcome'))
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        setPaymentError(error.message);
+      try {
+        setUpdatingOrder(true);
+        setPaymentError(undefined);
+        await adyenPayment(data.data.paymentMethod);
+        history.replace(addQueryParam(history, 'u', 'welcome'));
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          setPaymentError(error.message);
+        }
       }
-    }
 
-    setUpdatingOrder(false);
-  }, [history]);
+      setUpdatingOrder(false);
+    },
+    [history],
+  );
 
   const renderPaymentMethod = () => {
     const paymentMethod = paymentMethods?.find((method) => method.id === paymentMethodId);
@@ -161,27 +172,25 @@ const Checkout = () => {
   }
 
   return (
-    <React.Fragment>
-      <CheckoutForm
-        order={order}
-        offer={offer}
-        onBackButtonClick={backButtonClickHandler}
-        paymentMethods={paymentMethods}
-        paymentMethodId={paymentMethodId}
-        onPaymentMethodChange={handlePaymentMethodChange}
-        onCouponFormSubmit={couponCodeForm.handleSubmit}
-        onCouponInputChange={couponCodeForm.handleChange}
-        onRedeemCouponButtonClick={() => setCouponFormOpen(true)}
-        onCloseCouponFormClick={() => setCouponFormOpen(false)}
-        couponInputValue={couponCodeForm.values.couponCode}
-        couponFormOpen={couponFormOpen}
-        couponFormApplied={couponCodeApplied}
-        couponFormSubmitting={couponCodeForm.submitting}
-        couponFormError={!!couponCodeForm.errors.couponCode}
-        renderPaymentMethod={renderPaymentMethod}
-      />
-      {updatingOrder ? <LoadingOverlay inline /> : null}
-    </React.Fragment>
+    <CheckoutForm
+      order={order}
+      offer={offer}
+      onBackButtonClick={backButtonClickHandler}
+      paymentMethods={paymentMethods}
+      paymentMethodId={paymentMethodId}
+      onPaymentMethodChange={handlePaymentMethodChange}
+      onCouponFormSubmit={couponCodeForm.handleSubmit}
+      onCouponInputChange={couponCodeForm.handleChange}
+      onRedeemCouponButtonClick={() => setCouponFormOpen(true)}
+      onCloseCouponFormClick={() => setCouponFormOpen(false)}
+      couponInputValue={couponCodeForm.values.couponCode}
+      couponFormOpen={couponFormOpen}
+      couponFormApplied={couponCodeApplied}
+      couponFormSubmitting={couponCodeForm.submitting}
+      couponFormError={!!couponCodeForm.errors.couponCode}
+      renderPaymentMethod={renderPaymentMethod}
+      submitting={updatingOrder}
+    />
   );
 };
 
diff --git a/src/containers/AccountModal/forms/RenewSubscription.tsx b/src/containers/AccountModal/forms/RenewSubscription.tsx
index 819c465f4..01e3953c0 100644
--- a/src/containers/AccountModal/forms/RenewSubscription.tsx
+++ b/src/containers/AccountModal/forms/RenewSubscription.tsx
@@ -13,11 +13,11 @@ const RenewSubscription = () => {
   const history = useHistory();
   const { subscription, user } = AccountStore.useState((s) => s);
   const [renewed, setRenewed] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const renewSubscriptionConfirmHandler = async () => {
-    setLoading(true);
+    setSubmitting(true);
     setError(null);
 
     try {
@@ -27,7 +27,7 @@ const RenewSubscription = () => {
       setError(t('renew_subscription.unknown_error_occurred'));
     }
 
-    setLoading(false);
+    setSubmitting(false);
   };
 
   const closeHandler = () => {
@@ -41,9 +41,16 @@ const RenewSubscription = () => {
       {renewed ? (
         <SubscriptionRenewed onClose={closeHandler} subscription={subscription} customer={user} />
       ) : (
-        <RenewSubscriptionForm subscription={subscription} customer={user} error={error} onConfirm={renewSubscriptionConfirmHandler} onClose={closeHandler} />
+        <RenewSubscriptionForm
+          subscription={subscription}
+          customer={user}
+          error={error}
+          onConfirm={renewSubscriptionConfirmHandler}
+          onClose={closeHandler}
+          submitting={submitting}
+        />
       )}
-      {loading ? <LoadingOverlay inline /> : null}
+      {submitting ? <LoadingOverlay inline /> : null}
     </React.Fragment>
   );
 };
diff --git a/src/containers/AccountModal/forms/ResetPassword.tsx b/src/containers/AccountModal/forms/ResetPassword.tsx
index 6db073ab0..536dd3cfd 100644
--- a/src/containers/AccountModal/forms/ResetPassword.tsx
+++ b/src/containers/AccountModal/forms/ResetPassword.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { object, string } from 'yup';
 import { useTranslation } from 'react-i18next';
@@ -10,6 +10,7 @@ import useForm, { UseFormOnSubmitHandler } from '../../../hooks/useForm';
 import ForgotPasswordForm from '../../../components/ForgotPasswordForm/ForgotPasswordForm';
 import type { ForgotPasswordFormData } from '../../../../types/account';
 import ConfirmationForm from '../../../components/ConfirmationForm/ConfirmationForm';
+import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 
 type Prop = {
   type: 'confirmation' | 'forgot' | 'reset' | 'edit';
@@ -19,6 +20,7 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
   const { t } = useTranslation('account');
   const history = useHistory();
   const user = AccountStore.useState((state) => state.user);
+  const [resetPasswordSubmtting, setResetPasswordSubmitting] = useState<boolean>(false);
 
   const cancelClickHandler = () => {
     history.push(removeQueryParam(history, 'u'));
@@ -34,8 +36,10 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
     try {
       if (!user?.email) throw new Error('invalid param email');
 
+      setResetPasswordSubmitting(true);
       await resetPassword(user.email, resetUrl);
 
+      setResetPasswordSubmitting(false);
       history.push('/u/logout');
     } catch (error: unknown) {
       if (error instanceof Error) {
@@ -72,7 +76,9 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
 
   return (
     <React.Fragment>
-      {type === 'reset' && <ResetPasswordForm onCancel={cancelClickHandler} onReset={resetPasswordClickHandler} />}
+      {type === 'reset' && (
+        <ResetPasswordForm submitting={resetPasswordSubmtting} onCancel={cancelClickHandler} onReset={resetPasswordClickHandler} />
+      )}
       {type === 'forgot' && (
         <ForgotPasswordForm
           value={emailForm.values}
@@ -83,6 +89,7 @@ const ResetPassword: React.FC<Prop> = ({ type }: Prop) => {
         />
       )}
       {type === 'confirmation' && <ConfirmationForm email={emailForm.values.email} onBackToLogin={backToLoginClickHandler} />}
+      {(emailForm.submitting || resetPasswordSubmtting) && <LoadingOverlay transparentBackground inline />}
     </React.Fragment>
   );
 };

From 1c778fb9b095e289c723f4c92738e5666aff75f2 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 13:42:56 +0200
Subject: [PATCH 20/28] refactor(user): fix consent link, styling and remove
 obsolete

---
 src/components/Account/Account.module.scss   | 72 --------------------
 src/components/Account/Account.tsx           | 32 ++++++---
 src/components/Checkbox/Checkbox.module.scss |  6 +-
 3 files changed, 28 insertions(+), 82 deletions(-)

diff --git a/src/components/Account/Account.module.scss b/src/components/Account/Account.module.scss
index 04f39113a..bcca9e35b 100644
--- a/src/components/Account/Account.module.scss
+++ b/src/components/Account/Account.module.scss
@@ -18,78 +18,6 @@ button {
   margin-top: variables.$base-spacing;
 }
 
-.checkbox {
-  position: relative;
-  display: block;
-  align-items: center;
-  margin-top: variables.$base-spacing / 2;
-  margin-bottom: 0;
-  padding-left: variables.$base-spacing * 1.5;
-  font-size: 16px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  > input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    margin-right: 10px;
-    opacity: 0;
-    :not(&:disabled) {
-      &:hover ~ .checkmark:hover {
-        background-color: theme.$forms-checkbox-bg-hover;
-        cursor: pointer;
-      }
-      &:hover ~ .checkLabel {
-        cursor: pointer;
-      }
-      &:checked ~ .checkmark:hover {
-        background-color: theme.$forms-primary-color-hover;
-      }
-    }
-    &:checked ~ .checkmark {
-      background-color: theme.$forms-primary-color;
-    }
-    &:checked ~ .checkmark::after {
-      display: block;
-    }
-
-    &:disabled ~ .checkmark,
-    &:disabled ~ .checkLabel {
-      cursor: default;
-      opacity: 0.6;
-    }
-  }
-}
-
-.checkmark {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 15px;
-  height: 15px;
-  background-color: theme.$forms-checkbox-bg;
-  border-radius: 2px;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 5px;
-    display: none;
-
-    width: 5px;
-    height: 10px;
-    border: solid black;
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }
-}
-
 .submitConsents {
   margin-top: variables.$base-spacing;
 }
diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx
index 4d277b6cc..690b4a68a 100644
--- a/src/components/Account/Account.tsx
+++ b/src/components/Account/Account.tsx
@@ -59,6 +59,18 @@ const Account = ({
   const consentValues = useMemo(() => formatConsentValues(publisherConsents, customerConsents), [publisherConsents, customerConsents]);
   const initialValues = useMemo(() => ({ ...customer, consents: consentValues }), [customer, consentValues]);
 
+  const formatConsentLabel = (label: string): string | JSX.Element => {
+    // @todo sanitize consent label to prevent XSS
+    const hasHrefOpenTag = /<a(.|\n)*?>/.test(label);
+    const hasHrefCloseTag = /<\/a(.|\n)*?>/.test(label);
+
+    if (hasHrefOpenTag && hasHrefCloseTag) {
+      return <span dangerouslySetInnerHTML={{ __html: label }} />;
+    }
+
+    return label;
+  };
+
   const handleSubmit = (values: GenericFormValues) => {
     switch (editing) {
       case 'account':
@@ -199,7 +211,7 @@ const Account = ({
             {consentsLoading ? (
               <Spinner size="small" />
             ) : publisherConsents ? (
-              <div onClick={() => setEditing('consents')}>
+              <div className={styles.flexBox} onClick={() => setEditing('consents')}>
                 {publisherConsents.map((consent, index) => (
                   <Checkbox
                     key={index}
@@ -207,17 +219,19 @@ const Account = ({
                     value={values.consents?.[consent.name] || ''}
                     checked={(values.consents?.[consent.name] as boolean) || false}
                     onChange={(event) => (handleChange ? handleChange(event, { nestInto: 'consents' }) : null)}
+                    label={formatConsentLabel(consent.label)}
                     disabled={consent.required}
-                    label={consent.label}
                   />
                 ))}
-                <Button
-                  className={styles.submitConsents}
-                  type="button"
-                  label={t('account.update_consents')}
-                  disabled={!hasChanged}
-                  onClick={handleSubmit}
-                />
+                <div className={styles.controls}>
+                  <Button
+                    className={styles.submitConsents}
+                    type="button"
+                    label={t('account.update_consents')}
+                    disabled={!hasChanged}
+                    onClick={handleSubmit}
+                  />
+                </div>
               </div>
             ) : null}
           </div>
diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
index ee6c6079c..00eeb23bd 100644
--- a/src/components/Checkbox/Checkbox.module.scss
+++ b/src/components/Checkbox/Checkbox.module.scss
@@ -76,9 +76,13 @@
     &:disabled {
       opacity: 0.6;
       pointer-events: none;
+      + label {
+        cursor: default;
+        opacity: 0.6;
+      }
     }
 
-    &:hover {
+    &:hover:not(:disabled) {
       transform: scale(1.1);
     }
 

From 027204e1a4c7e7e333db02db04589fb1e94342bc Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 14:08:54 +0200
Subject: [PATCH 21/28] chore(auth): move overflow to dialog component

---
 src/components/Dialog/Dialog.module.scss      |  8 +++++++
 .../PersonalDetailsForm.module.scss           | 23 -------------------
 .../PersonalDetailsForm.tsx                   |  5 ++--
 src/components/Popover/Popover.tsx            |  2 +-
 .../RegistrationForm.module.scss              | 19 +++------------
 .../RegistrationForm/RegistrationForm.tsx     | 11 ++++-----
 6 files changed, 19 insertions(+), 49 deletions(-)

diff --git a/src/components/Dialog/Dialog.module.scss b/src/components/Dialog/Dialog.module.scss
index 187bdb645..de9662e31 100644
--- a/src/components/Dialog/Dialog.module.scss
+++ b/src/components/Dialog/Dialog.module.scss
@@ -3,8 +3,16 @@
 
 .dialog {
   max-width: 450px;
+  max-height: 90vh;
   padding: 24px;
+  overflow-y: auto;
   color: theme.$modal-color;
   background-color: theme.$modal-bg;
   border-radius: 6px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.module.scss b/src/components/PersonalDetailsForm/PersonalDetailsForm.module.scss
index 9c8776e76..3336e91d2 100644
--- a/src/components/PersonalDetailsForm/PersonalDetailsForm.module.scss
+++ b/src/components/PersonalDetailsForm/PersonalDetailsForm.module.scss
@@ -8,29 +8,6 @@
   font-size: 24px;
 }
 
-.error {
-  margin-bottom: 24px;
-  padding: 16px;
-  color: variables.$white;
-  font-family: theme.$body-font-family;
-  font-size: 18px;
-  background-color: theme.$form-feedback-error-bg-color;
-  border-radius: 4px;
-}
-
 .continue {
   margin: variables.$base-spacing 0;
 }
-
-.form {
-  max-height: 500px;
-  overflow-y: auto;
-  -ms-overflow-style: none; /* for Internet Explorer, Edge */
-  scrollbar-width: none; /* for Firefox */
-  &::-webkit-scrollbar {
-    display: none; /* for Chrome, Safari, and Opera */
-  }
-  > div {
-    margin: 12px 0;
-  }
-}
diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index f374fd51f..392be7e45 100644
--- a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -11,6 +11,7 @@ import Radio from '../Radio/Radio';
 import DateField from '../DateField/DateField';
 
 import styles from './PersonalDetailsForm.module.scss';
+import FormFeedback from '../FormFeedback/FormFeedback';
 
 type Props = {
   onSubmit: React.FormEventHandler<HTMLFormElement>;
@@ -65,9 +66,9 @@ const PersonalDetailsForm: React.FC<Props> = ({
   };
 
   return (
-    <form className={styles.form} onSubmit={onSubmit} data-testid="personal_details-form" noValidate>
+    <form onSubmit={onSubmit} data-testid="personal_details-form" noValidate>
       <h2 className={styles.title}>{t('personal_details.title')}</h2>
-      {errors.form ? <div className={styles.error}>{errors.form}</div> : null}
+      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       {fields.firstNameLastName?.enabled ? (
         <React.Fragment>
           <TextField
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
index 375f9ffc9..201c136fb 100644
--- a/src/components/Popover/Popover.tsx
+++ b/src/components/Popover/Popover.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import DetectOutsideClick from '../DetectOutsideClick/DetectOutsideClick';
diff --git a/src/components/RegistrationForm/RegistrationForm.module.scss b/src/components/RegistrationForm/RegistrationForm.module.scss
index 3204db0cb..bc6407993 100644
--- a/src/components/RegistrationForm/RegistrationForm.module.scss
+++ b/src/components/RegistrationForm/RegistrationForm.module.scss
@@ -8,21 +8,6 @@
   font-size: 24px;
 }
 
-.error {
-  margin-bottom: 24px;
-  padding: 16px;
-  color: variables.$white;
-  font-family: theme.$body-font-family;
-  font-size: 18px;
-  background-color: theme.$form-feedback-error-bg-color;
-  border-radius: 4px;
-}
-.loading {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-}
-
 .continue {
   margin: variables.$base-spacing 0;
 }
@@ -42,7 +27,9 @@
   font-family: theme.$body-alt-font-family;
   font-weight: 700;
   cursor: pointer;
-  &:hover {
+
+  &:hover,
+  &:focus {
     text-decoration: underline;
   }
 }
diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx
index 87ee346ef..447d98dd7 100644
--- a/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/src/components/RegistrationForm/RegistrationForm.tsx
@@ -13,7 +13,8 @@ import Visibility from '../../icons/Visibility';
 import VisibilityOff from '../../icons/VisibilityOff';
 import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import Checkbox from '../Checkbox/Checkbox';
-import Spinner from '../Spinner/Spinner';
+import FormFeedback from '../FormFeedback/FormFeedback';
+import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 
 import styles from './RegistrationForm.module.scss';
 
@@ -64,17 +65,13 @@ const RegistrationForm: React.FC<Props> = ({
   };
 
   if (loading) {
-    return (
-      <div className={styles.loading}>
-        <Spinner size="small" />
-      </div>
-    );
+    return <LoadingOverlay inline />;
   }
 
   return (
     <form onSubmit={onSubmit} data-testid="registration-form" noValidate>
       <h2 className={styles.title}>{t('registration.sign_up')}</h2>
-      {errors.form ? <div className={styles.error}>{errors.form}</div> : null}
+      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
         value={values.email}
         onChange={onChange}

From e55a91f47c911b318ea38957d7fe138604f078da Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 14:09:29 +0200
Subject: [PATCH 22/28] chore(project): fix link and Dropdown focus

---
 src/components/Dropdown/Dropdown.module.scss     | 12 +-----------
 src/components/Dropdown/Dropdown.tsx             |  1 -
 src/components/IconButton/IconButton.module.scss |  3 ++-
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
index 5dadf2b4c..47b30bbb6 100644
--- a/src/components/Dropdown/Dropdown.module.scss
+++ b/src/components/Dropdown/Dropdown.module.scss
@@ -116,20 +116,10 @@ $disabled-gradient: linear-gradient(to top, #ddd, $disabled-bg-color 33%);
   }
 
   &:hover,
-  &:focus {
+  &:focus-within {
     border-color: $select-focus;
     outline: none;
   }
-
-  &:focus + .focus {
-    position: absolute;
-    top: -1px;
-    right: -1px;
-    bottom: -1px;
-    left: -1px;
-    border: 2px solid orange;
-    border-radius: inherit;
-  }
 }
 
 .option {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index c77d8767f..86329d418 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -64,7 +64,6 @@ const Dropdown: React.FC<Props & React.AriaAttributes> = ({
               </option>
             ))}
         </select>
-        <span className="focus" />
       </div>
       {helperText ? <div className={styles.helperText}>{helperText}</div> : null}
     </div>
diff --git a/src/components/IconButton/IconButton.module.scss b/src/components/IconButton/IconButton.module.scss
index 1d725f2e0..8ce0e1425 100644
--- a/src/components/IconButton/IconButton.module.scss
+++ b/src/components/IconButton/IconButton.module.scss
@@ -13,7 +13,8 @@
   opacity: 0.7;
   transition: transform 0.1s ease;
 
-  &:hover {
+  &:hover,
+  &:focus {
     transform: scale(1.1);
     opacity: 1;
   }

From b6e68dcb7d8aa2e388633839cfc63a76963a7ece Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 14:10:13 +0200
Subject: [PATCH 23/28] chore(auth): go to next step after personal details

---
 src/containers/AccountModal/forms/PersonalDetails.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/containers/AccountModal/forms/PersonalDetails.tsx b/src/containers/AccountModal/forms/PersonalDetails.tsx
index 2bb4f64f4..bf162da2a 100644
--- a/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -10,6 +10,7 @@ import useForm, { UseFormOnSubmitHandler } from '../../../hooks/useForm';
 import { addQueryParam } from '../../../utils/history';
 import { getCaptureStatus, updateCaptureAnswers } from '../../../stores/AccountStore';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
+import { ConfigStore } from '../../../stores/ConfigStore';
 
 const yupConditional = (required: boolean, message: string) => {
   return required ? string().required(message) : mixed().notRequired();
@@ -18,6 +19,7 @@ const yupConditional = (required: boolean, message: string) => {
 const PersonalDetails = () => {
   const history = useHistory();
   const { t } = useTranslation('account');
+  const config = ConfigStore.useState(s => s.config);
   const { data, isLoading } = useQuery('captureStatus', () => getCaptureStatus());
   const [questionValues, setQuestionValues] = useState<Record<string, string>>({});
   const [questionErrors, setQuestionErrors] = useState<Record<string, string>>({});
@@ -80,12 +82,14 @@ const PersonalDetails = () => {
       return;
     }
 
-
     try {
       const removeEmpty = (obj: Record<string,unknown>) => Object.fromEntries(Object.keys(obj).filter(key => obj[key] !== '').map(key => [key, obj[key]]));
       const customAnswers = questions.map(question => ({ question: question.question, questionId: question.key, value: questionValues[question.key] } as CaptureCustomAnswer));
       await updateCaptureAnswers(removeEmpty({ ...formData, customAnswers }));
-      history.push(addQueryParam(history, 'u', 'personal-details'));
+
+      const hasOffers = config.json?.cleengMonthlyOffer && config.json?.cleengYearlyOffer;
+
+      history.push(addQueryParam(history, 'u', hasOffers ? 'choose-offer' : 'welcome'));
     } catch (error: unknown) {
       if (error instanceof Error) {
         setErrors({ form: error.message });

From 4d676a9fe779116ba031553811f3f2a13412e902 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 14:14:41 +0200
Subject: [PATCH 24/28] feat(auth): skip personal details when optional

---
 .../AccountModal/forms/PersonalDetails.tsx       | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/containers/AccountModal/forms/PersonalDetails.tsx b/src/containers/AccountModal/forms/PersonalDetails.tsx
index bf162da2a..eee3380da 100644
--- a/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import type { CaptureCustomAnswer, CleengCaptureQuestionField, PersonalDetailsFormData } from 'types/account';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
@@ -27,6 +27,16 @@ const PersonalDetails = () => {
   const fields = data ? Object.fromEntries(data.settings.map((item) => [item.key, item])) : {};
   const questions = data ? data.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[] : [];
 
+  const nextStep = useCallback(() => {
+    const hasOffers = config.json?.cleengMonthlyOffer && config.json?.cleengYearlyOffer;
+
+    history.replace(addQueryParam(history, 'u', hasOffers ? 'choose-offer' : 'welcome'));
+  }, [history, config]);
+
+  useEffect(() => {
+    if (data && (!data.isCaptureEnabled || !data.shouldCaptureBeDisplayed)) nextStep();
+  }, [data, nextStep]);
+
   const initialValues: PersonalDetailsFormData = {
     firstName: '',
     lastName: '',
@@ -87,9 +97,7 @@ const PersonalDetails = () => {
       const customAnswers = questions.map(question => ({ question: question.question, questionId: question.key, value: questionValues[question.key] } as CaptureCustomAnswer));
       await updateCaptureAnswers(removeEmpty({ ...formData, customAnswers }));
 
-      const hasOffers = config.json?.cleengMonthlyOffer && config.json?.cleengYearlyOffer;
-
-      history.push(addQueryParam(history, 'u', hasOffers ? 'choose-offer' : 'welcome'));
+      nextStep();
     } catch (error: unknown) {
       if (error instanceof Error) {
         setErrors({ form: error.message });

From 2bf95ddcee54496e952f53b7e3bd899be216cd75 Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 14:18:55 +0200
Subject: [PATCH 25/28] refactor(user): remove redundant logout switch

---
 src/screens/User/User.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/screens/User/User.tsx b/src/screens/User/User.tsx
index 2dd171a80..07d390c8a 100644
--- a/src/screens/User/User.tsx
+++ b/src/screens/User/User.tsx
@@ -88,9 +88,6 @@ const User = (): JSX.Element => {
       )}
       <div className={styles.mainColumn}>
         <Switch>
-          <Route path="/u/logout">
-            <LoadingOverlay transparentBackground />
-          </Route>
           <Route path="/u/my-account">
             <AccountContainer>
               {({
@@ -156,7 +153,7 @@ const User = (): JSX.Element => {
             </SubscriptionContainer>
           </Route>
           <Route path="/u/logout">
-            <Redirect to="/" />
+            <LoadingOverlay transparentBackground />
           </Route>
           <Route path="/u/:other?">
             <Redirect to="/u/my-account" />

From 8bbf2cf60d8cd57994a903e6813db7a69eb28cae Mon Sep 17 00:00:00 2001
From: Roy Schut <roy@videodock.com>
Date: Mon, 2 Aug 2021 14:31:14 +0200
Subject: [PATCH 26/28] refactor(project): fix failing unit tests

---
 .../CancelSubscriptionForm.test.tsx                      | 2 +-
 .../__snapshots__/CancelSubscriptionForm.test.tsx.snap   | 1 +
 src/components/CheckoutForm/CheckoutForm.test.tsx        | 1 +
 .../RenewSubscriptionForm/RenewSubscriptionForm.test.tsx | 9 ++++++++-
 .../__snapshots__/RenewSubscriptionForm.test.tsx.snap    | 1 +
 .../ResetPasswordForm/ResetPasswordForm.test.tsx         | 2 +-
 .../__snapshots__/ResetPasswordForm.test.tsx.snap        | 1 +
 7 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.test.tsx b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.test.tsx
index 386b88cdc..6f6fdefcd 100644
--- a/src/components/CancelSubscriptionForm/CancelSubscriptionForm.test.tsx
+++ b/src/components/CancelSubscriptionForm/CancelSubscriptionForm.test.tsx
@@ -5,7 +5,7 @@ import CancelSubscriptionForm from './CancelSubscriptionForm';
 
 describe('<CancelSubscriptionForm>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<CancelSubscriptionForm error={null} onCancel={jest.fn()} onConfirm={jest.fn()} />);
+    const { container } = render(<CancelSubscriptionForm submitting={false} error={null} onCancel={jest.fn()} onConfirm={jest.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap b/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
index ab9baf43e..1a20250bc 100644
--- a/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
+++ b/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<CancelSubscriptionForm> renders and matches snapshot 1`] = `
       cancel_subscription.explanation
     </p>
     <button
+      aria-disabled="false"
       class="button confirmButton primary fullWidth"
     >
       <span>
diff --git a/src/components/CheckoutForm/CheckoutForm.test.tsx b/src/components/CheckoutForm/CheckoutForm.test.tsx
index ec2d13f30..b0fa2c400 100644
--- a/src/components/CheckoutForm/CheckoutForm.test.tsx
+++ b/src/components/CheckoutForm/CheckoutForm.test.tsx
@@ -24,6 +24,7 @@ describe('<CheckoutForm>', () => {
         couponFormSubmitting={false}
         order={order as Order}
         offer={offer as Offer}
+        submitting={false}
       />,
     );
 
diff --git a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.test.tsx b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.test.tsx
index 2b00bad83..502657512 100644
--- a/src/components/RenewSubscriptionForm/RenewSubscriptionForm.test.tsx
+++ b/src/components/RenewSubscriptionForm/RenewSubscriptionForm.test.tsx
@@ -11,7 +11,14 @@ import RenewSubscriptionForm from './RenewSubscriptionForm';
 describe('<RenewSubscriptionForm>', () => {
   test('renders and matches snapshot', () => {
     const { container } = render(
-      <RenewSubscriptionForm customer={customer as Customer} subscription={subscription as Subscription} onConfirm={jest.fn()} onClose={jest.fn()} error={null}/>,
+      <RenewSubscriptionForm
+        customer={customer as Customer}
+        subscription={subscription as Subscription}
+        onConfirm={jest.fn()}
+        onClose={jest.fn()}
+        error={null}
+        submitting={false}
+      />,
     );
 
     expect(container).toMatchSnapshot();
diff --git a/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap b/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
index 7c871e7a5..18d6531f3 100644
--- a/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
+++ b/src/components/RenewSubscriptionForm/__snapshots__/RenewSubscriptionForm.test.tsx.snap
@@ -37,6 +37,7 @@ exports[`<RenewSubscriptionForm> renders and matches snapshot 1`] = `
       </p>
     </div>
     <button
+      aria-disabled="false"
       class="button confirmButton primary fullWidth"
     >
       <span>
diff --git a/src/components/ResetPasswordForm/ResetPasswordForm.test.tsx b/src/components/ResetPasswordForm/ResetPasswordForm.test.tsx
index 5a9ff3ce8..a17cbd240 100644
--- a/src/components/ResetPasswordForm/ResetPasswordForm.test.tsx
+++ b/src/components/ResetPasswordForm/ResetPasswordForm.test.tsx
@@ -5,7 +5,7 @@ import ResetPasswordForm from './ResetPasswordForm';
 
 describe('<ResetPassword>', () => {
   test('renders and matches snapshot', () => {
-    const { container } = render(<ResetPasswordForm onCancel={jest.fn()} onReset={jest.fn()} />);
+    const { container } = render(<ResetPasswordForm onCancel={jest.fn()} onReset={jest.fn()} submitting={false} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap b/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
index bdb38e442..0c1d336ad 100644
--- a/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
+++ b/src/components/ResetPasswordForm/__snapshots__/ResetPasswordForm.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<ResetPassword> renders and matches snapshot 1`] = `
       reset.text
     </p>
     <button
+      aria-disabled="false"
       class="button button primary outlined fullWidth"
     >
       <span>

From aabd79e2210126babe30930a7bb8c1783918396f Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 15:12:34 +0200
Subject: [PATCH 27/28] fix(project): fix start watching button when not logged
 in

---
 src/i18n/locales/en_US/video.json |  4 +++-
 src/i18n/locales/nl_NL/video.json |  4 +++-
 src/screens/Movie/Movie.tsx       | 17 +++++++++++------
 src/screens/Series/Series.tsx     | 19 ++++++++++++-------
 4 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/i18n/locales/en_US/video.json b/src/i18n/locales/en_US/video.json
index 04269e817..6cb1aee91 100644
--- a/src/i18n/locales/en_US/video.json
+++ b/src/i18n/locales/en_US/video.json
@@ -6,17 +6,19 @@
   "copied_url": "Copied url",
   "current_episode": "Current episode",
   "currently_playing": "Current video",
+  "episode_not_found": "Episode not found",
   "episodes": "Episodes",
   "favorite": "Favorite",
   "remove_from_favorites": "Remove from favorites",
-  "renew_your_subscription": "Renew your subscription",
   "season_prefix": "Season ",
+  "series_not_found": "Series not found",
   "share": "Share",
   "sign_up_to_start_watching": "Sign up to start watching!",
   "start_watching": "Start watching",
   "total_episodes": "{{ count }} episode",
   "total_episodes_plural": "{{ count }} episodes",
   "trailer": "Trailer",
+  "video_not_found": "Video not found",
   "watch_trailer": "Watch the trailer",
   "share_video": "Share this video"
 }
diff --git a/src/i18n/locales/nl_NL/video.json b/src/i18n/locales/nl_NL/video.json
index 8ec851773..ecf09f3f2 100644
--- a/src/i18n/locales/nl_NL/video.json
+++ b/src/i18n/locales/nl_NL/video.json
@@ -6,17 +6,19 @@
   "copied_url": "",
   "current_episode": "",
   "currently_playing": "",
+  "episode_not_found": "",
   "episodes": "",
   "favorite": "",
   "remove_from_favorites": "",
-  "renew_your_subscription": "",
   "season_prefix": "",
+  "series_not_found": "",
   "share": "",
   "sign_up_to_start_watching": "",
   "start_watching": "",
   "total_episodes": "",
   "total_episodes_plural": "",
   "trailer": "",
+  "video_not_found": "",
   "watch_trailer": "",
   "share_video": ""
 }
diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
index 8e9dd8201..6a4fd39f6 100644
--- a/src/screens/Movie/Movie.tsx
+++ b/src/screens/Movie/Movie.tsx
@@ -21,6 +21,7 @@ import { VideoProgressMinMax } from '../../config';
 import { ConfigStore } from '../../stores/ConfigStore';
 import { AccountStore } from '../../stores/AccountStore';
 import { configHasCleengOffer } from '../../utils/cleeng';
+import { addQueryParam } from '../../utils/history';
 
 import styles from './Movie.module.scss';
 
@@ -100,17 +101,21 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
   }, [history, id, playlist, searchParams]);
 
   const formatStartWatchingLabel = (): string => {
-    if (!user) return t('sign_up_to_start_watching');
-    if (!subscription) return t('complete_your_subscription');
+    if (cleengId) {
+      if (!user) return t('sign_up_to_start_watching');
+      if (!subscription && configHasOffer) return t('complete_your_subscription');
+    }
     return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
   const handleStartWatchingClick = useCallback(() => {
-    if (!user) return history.push('?u=login');
-    if (!allowedToWatch) return history.push('/u/payments');
+    if (cleengId) {
+      if (!user) return history.push(addQueryParam(history, 'u', 'create-account'));
+      if (!allowedToWatch) return history.push('/u/payments');
+    }
 
     return item && history.push(videoUrl(item, searchParams.get('r'), true));
-  }, [user, history, allowedToWatch, item, searchParams]);
+  }, [cleengId, item, history, searchParams, user, allowedToWatch]);
 
   // Effects
   useEffect(() => {
@@ -126,7 +131,7 @@ const Movie = ({ match, location }: RouteComponentProps<MovieRouteParams>): JSX.
 
   // UI
   if (isLoading && !item) return <LoadingOverlay />;
-  if ((!isLoading && error) || !item) return <ErrorPage title="Video not found!" />;
+  if ((!isLoading && error) || !item) return <ErrorPage title={t('video_not_found')} />;
 
   const pageTitle = `${item.title} - ${siteName}`;
   const canonicalUrl = item ? `${window.location.origin}${movieURL(item)}` : window.location.href;
diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
index 49e73e5e5..29d80fd6d 100644
--- a/src/screens/Series/Series.tsx
+++ b/src/screens/Series/Series.tsx
@@ -23,6 +23,7 @@ import { VideoProgressMinMax } from '../../config';
 import { ConfigStore } from '../../stores/ConfigStore';
 import { configHasCleengOffer } from '../../utils/cleeng';
 import { AccountStore } from '../../stores/AccountStore';
+import { addQueryParam } from '../../utils/history';
 
 import styles from './Series.module.scss';
 
@@ -112,17 +113,21 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
   }, [history, item, seriesPlaylist]);
 
   const formatStartWatchingLabel = (): string => {
-    if (!user) return t('sign_up_to_start_watching');
-    if (!subscription) return t('complete_your_subscription');
+    if (cleengId) {
+      if (!user) return t('sign_up_to_start_watching');
+      if (!subscription && configHasOffer) return t('complete_your_subscription');
+    }
     return typeof progress === 'number' ? t('continue_watching') : t('start_watching');
   };
 
   const handleStartWatchingClick = useCallback(() => {
-    if (!user) return history.push('?u=login');
-    if (!allowedToWatch) return history.push('/u/payments');
+    if (cleengId) {
+      if (!user) return history.push(addQueryParam(history, 'u', 'create-account'));
+      if (!allowedToWatch) return history.push('/u/payments');
+    }
 
     return history.push(episodeURL(seriesPlaylist, item?.mediaid, true));
-  }, [user, history, allowedToWatch, item, seriesPlaylist]);
+  }, [cleengId, history, seriesPlaylist, item?.mediaid, user, allowedToWatch]);
 
   // Effects
   useEffect(() => {
@@ -144,8 +149,8 @@ const Series = ({ match, location }: RouteComponentProps<SeriesRouteParams>): JS
 
   // UI
   if ((!item && isLoading) || playlistIsLoading || !searchParams.has('e')) return <LoadingOverlay />;
-  if ((!isLoading && error) || !item) return <ErrorPage title="Episode not found!" />;
-  if (playlistError || !seriesPlaylist) return <ErrorPage title="Series not found!" />;
+  if ((!isLoading && error) || !item) return <ErrorPage title={t('episode_not_found')} />;
+  if (playlistError || !seriesPlaylist) return <ErrorPage title={t('series_not_found')} />;
 
   const pageTitle = `${item.title} - ${siteName}`;
   const canonicalUrl = seriesPlaylist && item ? `${window.location.origin}${episodeURL(seriesPlaylist, item.mediaid)}` : window.location.href;

From 6c65beebaa5e6a486945f6fbafed26028574b8a9 Mon Sep 17 00:00:00 2001
From: Christiaan Scheermeijer <christiaan@videodock.com>
Date: Mon, 2 Aug 2021 15:18:32 +0200
Subject: [PATCH 28/28] chore(auth): use configHasCleengOffer util

---
 .../AccountModal/forms/ChooseOffer.tsx         | 18 +++++++++++++-----
 .../AccountModal/forms/PersonalDetails.tsx     |  3 ++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/containers/AccountModal/forms/ChooseOffer.tsx b/src/containers/AccountModal/forms/ChooseOffer.tsx
index 0c7002585..7fdcddb96 100644
--- a/src/containers/AccountModal/forms/ChooseOffer.tsx
+++ b/src/containers/AccountModal/forms/ChooseOffer.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useEffect } from 'react';
 import { object, SchemaOf, mixed } from 'yup';
 import type { ChooseOfferFormData, OfferPeriodicity } from 'types/account';
 import { useTranslation } from 'react-i18next';
@@ -8,15 +8,18 @@ import { useHistory } from 'react-router';
 import useForm, { UseFormOnSubmitHandler } from '../../../hooks/useForm';
 import ChooseOfferForm from '../../../components/ChooseOfferForm/ChooseOfferForm';
 import { getOffer } from '../../../services/checkout.service';
-import { ConfigContext } from '../../../providers/ConfigProvider';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 import { CheckoutStore } from '../../../stores/CheckoutStore';
-import { addQueryParam } from '../../../utils/history';
+import { addQueryParam, removeQueryParam } from '../../../utils/history';
+import { configHasCleengOffer } from '../../../utils/cleeng';
+import { ConfigStore } from '../../../stores/ConfigStore';
 
 const ChooseOffer = () => {
   const history = useHistory();
   const { t } = useTranslation('account');
-  const { cleengSandbox, json } = useContext(ConfigContext);
+  const config = ConfigStore.useState(s => s.config);
+  const { cleengSandbox, json } = config;
+  const hasOffer = configHasCleengOffer(config);
   const offer = CheckoutStore.useState((s) => s.offer);
 
   const cleengMonthlyOffer = json?.cleengMonthlyOffer as string;
@@ -26,6 +29,11 @@ const ChooseOffer = () => {
   const { data: monthlyOfferData } = useQuery(['offer', cleengMonthlyOffer], () => getOffer({ offerId: cleengMonthlyOffer }, cleengSandbox));
   const { data: yearlyOfferData } = useQuery(['offer', cleengYearlyOffer], () => getOffer({ offerId: cleengYearlyOffer }, cleengSandbox));
 
+  useEffect(() => {
+    // close auth modal when there are no offers defined in the config
+    if (!hasOffer) history.replace(removeQueryParam(history, 'u'));
+  }, [hasOffer, history]);
+
   const chooseOfferSubmitHandler: UseFormOnSubmitHandler<ChooseOfferFormData> = async (formData, { setSubmitting, setErrors }) => {
     const offer = formData.periodicity === 'monthly' ? monthlyOfferData?.responseData : yearlyOfferData?.responseData;
 
@@ -49,7 +57,7 @@ const ChooseOffer = () => {
   const { handleSubmit, handleChange, values, errors, submitting } = useForm(initialValues, chooseOfferSubmitHandler, validationSchema);
 
   // loading state
-  if (!monthlyOfferData?.responseData || !yearlyOfferData?.responseData) {
+  if (!hasOffer || !monthlyOfferData?.responseData || !yearlyOfferData?.responseData) {
     return (
       <div style={{ height: 300 }}>
         <LoadingOverlay inline />
diff --git a/src/containers/AccountModal/forms/PersonalDetails.tsx b/src/containers/AccountModal/forms/PersonalDetails.tsx
index eee3380da..1094a6305 100644
--- a/src/containers/AccountModal/forms/PersonalDetails.tsx
+++ b/src/containers/AccountModal/forms/PersonalDetails.tsx
@@ -11,6 +11,7 @@ import { addQueryParam } from '../../../utils/history';
 import { getCaptureStatus, updateCaptureAnswers } from '../../../stores/AccountStore';
 import LoadingOverlay from '../../../components/LoadingOverlay/LoadingOverlay';
 import { ConfigStore } from '../../../stores/ConfigStore';
+import { configHasCleengOffer } from '../../../utils/cleeng';
 
 const yupConditional = (required: boolean, message: string) => {
   return required ? string().required(message) : mixed().notRequired();
@@ -28,7 +29,7 @@ const PersonalDetails = () => {
   const questions = data ? data.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[] : [];
 
   const nextStep = useCallback(() => {
-    const hasOffers = config.json?.cleengMonthlyOffer && config.json?.cleengYearlyOffer;
+    const hasOffers = configHasCleengOffer(config);
 
     history.replace(addQueryParam(history, 'u', hasOffers ? 'choose-offer' : 'welcome'));
   }, [history, config]);