fix: refactor inplayer approach

ini/.webapp.dev.ini

@@ -0,0 +1,4 @@
+; This is a basic Blender demo
+defaultConfigSource = gnnuzabk
+; When developing, switching between configs is useful for test and debug
+UNSAFE_allowAnyConfigSource = true

src/App.tsx

@@ -1,8 +1,5 @@
 import React, { Component } from 'react';
 import { getI18n, I18nextProvider } from 'react-i18next';
-import InPlayer from '@inplayer-org/inplayer.js';
-
-import { initializeInPlayerAccount } from './stores/inplayer/AccountController';
 
 import type { Config } from '#types/Config';
 import Router from '#src/containers/Router/Router';
@@ -36,16 +33,10 @@ class App extends Component {
   }
 
   async initializeServices(config: Config) {
-    if (config?.integrations?.cleeng?.id) {
+    if (config?.integrations) {
       await initializeAccount();
     }
 
-    if (config?.integrations?.inplayer?.clientId) {
-      // this is temporary until the config is loaded from jw side
-      InPlayer.setConfig(import.meta.env.APP_INPLAYER_SDK);
-      await initializeInPlayerAccount();
-    }
-
     // We only request favorites and continue_watching data if there is a corresponding item in the content section
     // and a playlist in the features section.
     // We first initialize the account otherwise if we have favorites saved as externalData and in a local storage the sections may blink

src/components/UserMenu/UserMenu.tsx

@@ -11,8 +11,6 @@ import BalanceWallet from '#src/icons/BalanceWallet';
 import Exit from '#src/icons/Exit';
 import MenuButton from '#components/MenuButton/MenuButton';
 import { logout } from '#src/stores/AccountController';
-import useClientIntegration, { ClientIntegrations } from '#src/hooks/useClientIntegration';
-import { inPlayerLogout } from '#src/stores/inplayer/AccountController';
 
 type Props = {
   inPopover?: boolean;
@@ -23,17 +21,15 @@ type Props = {
 const UserMenu = ({ showPaymentsItem, inPopover = false, onClick }: Props) => {
   const { t } = useTranslation('user');
   const navigate = useNavigate();
-  const { client } = useClientIntegration();
-  const logoutUser = client === ClientIntegrations.INPLAYER ? inPlayerLogout : logout;
 
   const onLogout = useCallback(async () => {
     if (onClick) {
       onClick();
     }
 
-    await logoutUser();
+    await logout();
     navigate('/', { replace: true });
-  }, [onClick, navigate, logoutUser]);
+  }, [onClick, navigate]);
 
   const menuItems = (
     <ul className={styles.menuItems}>

src/containers/AccountModal/forms/Login.tsx

@@ -5,24 +5,20 @@ import { useLocation, useNavigate } from 'react-router';
 
 import { useConfigStore } from '#src/stores/ConfigStore';
 import useForm, { UseFormOnSubmitHandler } from '#src/hooks/useForm';
-import useClientIntegration, { ClientIntegrations } from '#src/hooks/useClientIntegration';
 import LoginForm from '#components/LoginForm/LoginForm';
 import { removeQueryParam } from '#src/utils/location';
 import type { LoginFormData } from '#types/account';
 import { login } from '#src/stores/AccountController';
-import { inplayerLogin } from '#src/stores/inplayer/AccountController';
 
 const Login = () => {
   const { siteName } = useConfigStore((s) => s.config);
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation('account');
-  const { client } = useClientIntegration();
-  const loginUser = client === ClientIntegrations.INPLAYER ? inplayerLogin : login;
 
   const loginSubmitHandler: UseFormOnSubmitHandler<LoginFormData> = async (formData, { setErrors, setSubmitting, setValue }) => {
     try {
-      await loginUser(formData.email, formData.password);
+      await login(formData.email, formData.password);
 
       // close modal
       navigate(removeQueryParam(location, 'u'));

src/pages/User/User.tsx

@@ -25,8 +25,6 @@ import Favorites from '#components/Favorites/Favorites';
 import type { PlaylistItem } from '#types/playlist';
 import { logout } from '#src/stores/AccountController';
 import { clear as clearFavorites } from '#src/stores/FavoritesController';
-import useClientIntegration, { ClientIntegrations } from '#src/hooks/useClientIntegration';
-import { inPlayerLogout } from '#src/stores/inplayer/AccountController';
 
 const User = (): JSX.Element => {
   const { accessModel, favoritesList, shelfTitles } = useConfigStore(
@@ -44,17 +42,15 @@ const User = (): JSX.Element => {
   const [showAllTransactions, setShowAllTransactions] = useState(false);
   const isLargeScreen = breakpoint > Breakpoint.md;
   const { user: customer, subscription, transactions, activePayment, loading } = useAccountStore();
-  const { client } = useClientIntegration();
-  const logoutUser = client === ClientIntegrations.INPLAYER ? inPlayerLogout : logout;
 
   const updateBlurImage = useBlurImageUpdater();
 
   const onCardClick = (playlistItem: PlaylistItem) => navigate(mediaURL(playlistItem));
   const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
   const onLogout = useCallback(async () => {
     // Empty customer on a user page leads to navigate (code bellow), so we don't repeat it here
-    await logoutUser();
-  }, [logoutUser]);
+    await logout();
+  }, []);
 
   useEffect(() => updateBlurImage(''), [updateBlurImage]);
 

src/services/cleeng.account.service.ts

@@ -23,6 +23,8 @@ import type {
 } from '#types/account';
 import type { Config } from '#types/Config';
 
+export const setEnvironment = () => true;
+
 export const login: Login = async ({ config, email, password }) => {
   const payload: LoginPayload = {
     email,
@@ -41,7 +43,9 @@ export const login: Login = async ({ config, email, password }) => {
   };
 };
 
-async function getUser({ config, auth }: { config: Config; auth: AuthData }) {
+export const logout = async () => true;
+
+export async function getUser({ config, auth }: { config: Config; auth: AuthData }) {
   const decodedToken: JwtDetails = jwtDecode(auth.jwt);
   const customerId = decodedToken.customerId;
   const { responseData: user, errors } = await getCustomer({ customerId }, !!config.integrations.cleeng?.useSandbox, auth.jwt);
@@ -51,6 +55,14 @@ async function getUser({ config, auth }: { config: Config; auth: AuthData }) {
   return user;
 }
 
+export const getFreshJwtToken = async ({ config, auth }: { config: Config; auth: AuthData }) => {
+  const result = await refreshToken({ refreshToken: auth.refreshToken }, !!config.integrations.cleeng?.useSandbox);
+
+  if (result.errors.length) throw new Error(result.errors[0]);
+
+  return result?.responseData;
+};
+
 export const register: Register = async (payload, sandbox) => {
   payload.customerIP = getOverrideIP();
   return post(sandbox, '/customers', JSON.stringify(payload));

src/services/inplayer.account.service.ts

@@ -1,18 +1,53 @@
-import InPlayer from '@inplayer-org/inplayer.js';
+import InPlayer, { Env } from '@inplayer-org/inplayer.js';
 
-import type { Login } from '#types/account';
+import type { AuthData, Customer, Login } from '#types/account';
 import { processInplayerAccount, processInPlayerAuth } from '#src/utils/common';
+import type { Config } from '#types/Config';
+
+enum InPlayerEnv {
+  Development = 'development',
+  Production = 'production',
+  Daily = 'daily',
+}
+
+export const setEnvironment = (config: Config) => {
+  const env: string = config.integrations?.inplayer?.useSandbox ? InPlayerEnv.Daily : InPlayerEnv.Production;
+  InPlayer.setConfig(env as Env);
+};
 
 export const login: Login = async ({ config, email, password }) => {
-  const { data } = await InPlayer.Account.signInV2({
-    email,
-    password,
-    clientId: config.integrations.inplayer?.clientId || '',
-    referrer: window.location.href,
-  });
-
-  return {
-    auth: processInPlayerAuth(data),
-    user: processInplayerAccount(data.account),
-  };
+  try {
+    const { data } = await InPlayer.Account.signInV2({
+      email,
+      password,
+      clientId: config.integrations.inplayer?.clientId || '',
+      referrer: window.location.href,
+    });
+
+    return {
+      auth: processInPlayerAuth(data),
+      user: processInplayerAccount(data.account),
+    };
+  } catch {
+    throw new Error('Failed to authenticate user.');
+  }
 };
+
+export const logout = async () => {
+  try {
+    InPlayer.Account.signOut();
+  } catch {
+    throw new Error('Failed to sign out.');
+  }
+};
+
+export const getUser = async (): Promise<Customer> => {
+  try {
+    const { data } = await InPlayer.Account.getAccountInfo();
+    return processInplayerAccount(data);
+  } catch {
+    throw new Error('Failed to fetch user data.');
+  }
+};
+
+export const getFreshJwtToken = async ({ auth }: { auth: AuthData }) => auth;