@memori.ai/memori-react 5.1.0 → 6.0.0-rc.0

package/src/components/LoginDrawer/LoginDrawer.css

@@ -0,0 +1,84 @@
+.memori--login-drawer {
+    z-index: 1000;
+}
+
+.memori--login-drawer .memori-drawer--panel {
+    --memori-drawer--width: 100%;
+    --memori-drawer--width--md: 60%;
+    --memori-drawer--width--lg: 40%;
+}
+
+.memori--login-drawer.memori--login-drawer--logged .memori-drawer--panel {
+    --memori-drawer--width: 100%;
+    --memori-drawer--width--md: 40%;
+    --memori-drawer--width--lg: 30%;
+}
+
+h2.memori--login-drawer--title {
+    margin: 0;
+    font-size: inherit;
+    font-weight: 400;
+    line-height: inherit;
+}
+
+form.memori--login-drawer--form {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem 0.5rem;
+}
+
+p.memori--login-drawer--error {
+    margin: 0.5rem 0;
+    color: var(--memori-error-color);
+    text-align: center;
+}
+
+.memori--login-drawer--form label:not(.memori-checkbox) {
+    display: block;
+    width: 100%;
+    margin: 0.5rem 0;
+}
+
+.memori--login-drawer--form label.memori-checkbox {
+    width: 100%;
+    margin: 0.5rem 0;
+}
+
+.memori--login-drawer--form input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid var(--memori-button-border-color, #ccc);
+    border-radius: 5px;
+    margin: 0.5rem 0;
+    font-size: 16px;
+    line-height: 1.5;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.memori--login-drawer--form button:focus,
+.memori--login-drawer--form input:focus,
+.memori--login-drawer--form input[type="checkbox"]:focus+.memori-checkbox--inner {
+    border-color: var(--memori-primary);
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+    outline: none;
+}
+
+.memori--login-drawer--form a {
+    color: var(--memori-primary);
+    text-decoration: underline;
+}
+
+.memori--login-drawer--form a:hover,
+.memori--login-drawer--form a:focus,
+.memori--login-drawer--form a:active {
+    opacity: 0.8;
+    outline-color: var(--memori-primary);
+}
+
+.memori--login-drawer--form button[type="submit"] {
+    margin-top: 1rem;
+}
+
+p.memori--login-drawer--signup {
+    margin-top: 1.25rem;
+}

package/src/components/LoginDrawer/LoginDrawer.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import I18nWrapper from '../../I18nWrapper';
+import LoginDrawer, { Props } from './LoginDrawer';
+import { tenant, user } from '../../mocks/data';
+import './LoginDrawer.css';
+
+const meta: Meta = {
+  title: 'Widget/LoginDrawer',
+  component: LoginDrawer,
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  return (
+    <I18nWrapper>
+      <LoginDrawer
+        {...args}
+        onClose={() => {}}
+        onLogin={console.log}
+        onLogout={() => {}}
+        tenant={tenant}
+        apiUrl="https://backend.memori.ai"
+      />
+    </I18nWrapper>
+  );
+};
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  open: true,
+};
+
+export const NeedsMissingData = Template.bind({});
+NeedsMissingData.args = {
+  open: true,
+  __TEST__needMissingData: true,
+};
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  open: true,
+  user,
+  loginToken: 'token',
+};

package/src/components/LoginDrawer/LoginDrawer.test.tsx

@@ -0,0 +1,86 @@
+import { render } from '@testing-library/react';
+import LoginDrawer from './LoginDrawer';
+import React from 'react';
+import { tenant, expertReference, user } from '../../mocks/data';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders LoginDrawer closed unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer open unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer unlogged unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer logged with missing data unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+      __TEST__needMissingData
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer logged in unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiUrl="https://backend.memori.ai"
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+      user={user}
+      loginToken="token"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -0,0 +1,330 @@
+import { User, Tenant } from '@memori.ai/memori-api-client/dist/types';
+import React, { useEffect, useState } from 'react';
+import Button from '../ui/Button';
+import Drawer from '../ui/Drawer';
+import toast from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import cx from 'classnames';
+import memoriApiClient from '@memori.ai/memori-api-client';
+import { getErrori18nKey } from '../../helpers/error';
+
+export const mailRegEx = /^\w+([.-]?[+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,})+$/;
+
+export interface Props {
+  open?: boolean;
+  onClose: () => void;
+  user?: User;
+  loginToken?: string;
+  onLogin: (user: User, token: string) => void;
+  onLogout: () => void;
+  tenant: Tenant;
+  apiUrl: string;
+  __TEST__needMissingData?: boolean;
+}
+
+const LoginDrawer = ({
+  open = false,
+  onClose,
+  onLogin,
+  onLogout,
+  user,
+  loginToken,
+  tenant,
+  apiUrl,
+  __TEST__needMissingData = false,
+}: Props) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language === 'it' ? 'it' : 'en';
+
+  const client = memoriApiClient(apiUrl);
+  const { userLogin, updateUser } = client.backend;
+
+  const [loading, setLoading] = useState(false);
+  const [needsMissingData, setNeedsMissingData] = useState<{
+    token: string;
+    birthDate?: boolean;
+    tnCAndPPAccepted?: boolean;
+  }>(
+    __TEST__needMissingData
+      ? {
+          token: 'token',
+          birthDate: true,
+          tnCAndPPAccepted: true,
+        }
+      : ({} as any)
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  const [redirectTo, setRedirectTo] = useState<string | null>(null);
+  useEffect(() => {
+    setRedirectTo(window.location.href);
+  }, []);
+
+  const isUserLoggedIn = user && loginToken;
+
+  const login = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget as HTMLFormElement;
+    const userNameOrEmail = form.userNameOrEmail.value;
+    const password = form.password.value;
+
+    const isEmail = mailRegEx.test(userNameOrEmail);
+    const user: User = isEmail
+      ? {
+          tenant: tenant?.id,
+          eMail: userNameOrEmail,
+          password: password,
+        }
+      : {
+          tenant: tenant?.id,
+          userName: userNameOrEmail,
+          password: password,
+        };
+    setLoading(true);
+    setError(null);
+    userLogin(user)
+      .then(data => {
+        if (data.resultCode !== 0) {
+          console.error(data);
+          toast.error(t(getErrori18nKey(data.resultCode), { ns: 'common' }));
+          setError(data.resultMessage);
+        } else if (data.user && data.token) {
+          onLogin(data.user as User, data.token);
+
+          if (!data.user?.tnCAndPPAccepted || !data.user?.birthDate) {
+            setNeedsMissingData({
+              token: data.token,
+              birthDate: !data.user?.birthDate,
+              tnCAndPPAccepted: !data.user?.tnCAndPPAccepted,
+            });
+          }
+        }
+      })
+      .catch(err => {
+        console.error('[LOGIN]', err);
+        toast.error(err);
+
+        if (err.message) setError(err.message);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const updateMissingData = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const form = e.currentTarget as HTMLFormElement;
+
+    const birthDate = form.birthDate?.value;
+    const tnCAndPPAccepted = form.tnCAndPPAccepted?.checked;
+    const pAndCUAccepted = form.pAndCUAccepted?.checked;
+
+    if (!user?.userID || !needsMissingData?.token) {
+      return;
+    }
+
+    if (!birthDate || !tnCAndPPAccepted) {
+      setError(t('missingData'));
+      return;
+    }
+
+    let newUser: Partial<User> = {
+      userID: user.userID,
+      birthDate:
+        user?.birthDate || !needsMissingData.birthDate ? undefined : birthDate,
+      tnCAndPPAccepted: tnCAndPPAccepted || user?.tnCAndPPAccepted,
+      tnCAndPPAcceptanceDate: tnCAndPPAccepted
+        ? new Date().toISOString()
+        : undefined,
+      pAndCUAccepted: pAndCUAccepted || user?.pAndCUAccepted,
+      pAndCUAcceptanceDate: pAndCUAccepted
+        ? new Date().toISOString()
+        : undefined,
+    };
+
+    const { user: patchedUser, ...resp } = await updateUser(
+      needsMissingData.token,
+      user.userID,
+      newUser
+    );
+    if (resp.resultCode !== 0) {
+      console.error(resp);
+      toast.error(t(getErrori18nKey(resp.resultCode), { ns: 'common' }));
+      setError(resp.resultMessage);
+    } else {
+      toast.success(t('success'));
+      onLogin(patchedUser || newUser, needsMissingData.token);
+    }
+  };
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      className={cx('memori--login-drawer', {
+        'memori--login-drawer--logged': isUserLoggedIn,
+      })}
+      title={
+        <h2 className="memori--login-drawer--title">
+          {isUserLoggedIn
+            ? t('login.loggedDrawerTitle', { name: user.userName })
+            : t('login.loginDrawerTitle')}
+        </h2>
+      }
+    >
+      {isUserLoggedIn ? (
+        <div className="memori--login-drawer--logged">
+          <Button
+            primary
+            onClick={() => {
+              onLogout();
+            }}
+          >
+            {t('login.logout')}
+          </Button>
+        </div>
+      ) : needsMissingData?.token?.length ? (
+        <>
+          <h3>{t('login.missingData')}</h3>
+          <p>{t('login.missingDataHelper')}</p>
+
+          <form
+            className="memori--login-drawer--form"
+            onSubmit={updateMissingData}
+          >
+            {needsMissingData.birthDate && (
+              <>
+                <label htmlFor="#birthDate">
+                  {t('login.birthDate')}
+                  <input
+                    id="birthDate"
+                    name="birthDate"
+                    type="date"
+                    required
+                    autoComplete="bday"
+                  />
+                </label>
+                <p>
+                  <small>{t('login.birthDateHelper')}</small>
+                </p>
+              </>
+            )}
+
+            {needsMissingData?.tnCAndPPAccepted && (
+              <>
+                <label className="memori-checkbox">
+                  <span className="memori-checkbox--input-wrapper">
+                    <input
+                      type="checkbox"
+                      name="tnCAndPPAccepted"
+                      className="memori-checkbox--input"
+                    />
+                    <span className="memori-checkbox--inner" />
+                  </span>
+                  <span className="memori-checkbox--text">
+                    {t('login.privacyLabel')}{' '}
+                    <a
+                      href={`https://memori.ai/${lang}/privacy_and_cookie`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('login.privacyAndCookiePolicy')}
+                    </a>{' '}
+                    {t('login.and')}{' '}
+                    <a
+                      href={`https://memori.ai/${lang}/tos`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {t('login.termsOfService')}
+                    </a>
+                  </span>
+                </label>
+
+                <label className="memori-checkbox">
+                  <span className="memori-checkbox--input-wrapper">
+                    <input
+                      type="checkbox"
+                      name="pAndCUAccepted"
+                      defaultChecked={user?.pAndCUAccepted}
+                      className="memori-checkbox--input"
+                    />
+                    <span className="memori-checkbox--inner" />
+                  </span>
+                  <span className="memori-checkbox--text">
+                    {t('login.pAndCUAccepted')}{' '}
+                    <small>
+                      <em>({t('login.optional')})</em>
+                    </small>
+                  </span>
+                </label>
+                <p>
+                  <small>{t('login.goToAccountToChangeYourPreferences')}</small>
+                </p>
+                <p>
+                  <small>{t('login.deepThoughtExplaination')}</small>
+                </p>
+              </>
+            )}
+
+            <Button htmlType="submit" primary loading={loading}>
+              {t('login.save')}
+            </Button>
+          </form>
+        </>
+      ) : (
+        <>
+          <form className="memori--login-drawer--form" onSubmit={login}>
+            <label htmlFor="#userNameOrEmail">
+              {t('login.userNameOrEmail')}
+              <input
+                id="userNameOrEmail"
+                name="userNameOrEmail"
+                required
+                autoComplete="email"
+                placeholder="Username/email"
+              />
+            </label>
+
+            <label htmlFor="#password">
+              Password
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                autoComplete="password"
+                placeholder="Password"
+              />
+            </label>
+
+            <Button htmlType="submit" primary loading={loading}>
+              {t('login.login')}
+            </Button>
+
+            {!tenant?.disableRegistration && (
+              <p className="memori--login-drawer--signup">
+                {t('login.newUserSignUp')}{' '}
+                <a
+                  href={`https://${
+                    tenant.name || 'www.aisuru.com'
+                  }/${lang}/auth?signup=1&redirectTo=${redirectTo}`}
+                >
+                  {t('login.signUp')}
+                </a>
+              </p>
+            )}
+          </form>
+
+          {error && (
+            <p role="alert" className="memori--login-drawer--error">
+              {error}
+            </p>
+          )}
+        </>
+      )}
+    </Drawer>
+  );
+};
+
+export default LoginDrawer;

package/src/components/LoginDrawer/__snapshots__/LoginDrawer.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders LoginDrawer closed unchanged 1`] = `<div />`;
+
+exports[`renders LoginDrawer logged in unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer logged with missing data unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer open unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer unlogged unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -53,6 +53,7 @@ import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
 import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 import KnownFacts from '../KnownFacts/KnownFacts';
 import ExpertsDrawer from '../ExpertsDrawer/ExpertsDrawer';
+import LoginDrawer from '../LoginDrawer/LoginDrawer';
 
 // Layout
 import FullPageLayout from '../layouts/FullPage';
@@ -331,6 +332,7 @@ export interface Props {
   showClear?: boolean;
   showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
+  showLogin?: boolean;
   preview?: boolean;
   embed?: boolean;
   height?: number | string;
@@ -375,6 +377,7 @@ const MemoriWidget = ({
   showSettings = true,
   showTypingText = false,
   showClear = false,
+  showLogin = true,
   showOnlyLastMessages,
   height = '100vh',
   secret,
@@ -420,16 +423,22 @@ const MemoriWidget = ({
   const [loginToken, setLoginToken] = useState<string | undefined>(
     additionalInfo?.loginToken ?? authToken
   );
-  const [user, setUser] = useState<User>({
+  const [user, setUser] = useState<User | undefined>({
     avatarURL: typeof userAvatar === 'string' ? userAvatar : undefined,
   } as User);
   useEffect(() => {
-    if (loginToken) {
+    if (loginToken && !user?.userID) {
       client.backend.getCurrentUser(loginToken).then(({ user, resultCode }) => {
-        if (user && resultCode === 0) setUser(user);
+        if (user && resultCode === 0) {
+          setUser(user);
+          setLocalConfig('loginToken', loginToken);
+        } else {
+          setLocalConfig('loginToken', undefined);
+        }
       });
     }
-  }, [loginToken]);
+  }, [loginToken, user?.userID]);
+  const [showLoginDrawer, setShowLoginDrawer] = useState(false);
 
   const [clickedStart, setClickedStart] = useState(false);
   const [gotErrorInOpening, setGotErrorInOpening] = useState(false);
@@ -514,6 +523,10 @@ const MemoriWidget = ({
       getLocalConfig('controlsPosition', defaultControlsPosition)
     );
     setHideEmissions(getLocalConfig('hideEmissions', false));
+
+    if (!additionalInfo?.loginToken && !authToken) {
+      setLoginToken(getLocalConfig<typeof loginToken>('loginToken', undefined));
+    }
   }, []);
 
   /**
@@ -2622,6 +2635,8 @@ const MemoriWidget = ({
     showReload: selectedLayout === 'TOTEM',
     showClear,
     clearHistory: () => setHistory(h => h.slice(-1)),
+    showLogin,
+    setShowLoginDrawer,
     loginToken,
     user,
     sessionID: sessionId,
@@ -2660,6 +2675,8 @@ const MemoriWidget = ({
     onClickStart: onClickStart,
     initializeTTS: initializeTTS,
     isUserLoggedIn: !!loginToken,
+    showLogin,
+    setShowLoginDrawer,
     user,
   };
 
@@ -2946,6 +2963,33 @@ const MemoriWidget = ({
           onClose={() => setShowExpertsDrawer(false)}
         />
       )}
+
+      {showLoginDrawer && tenant?.id && (
+        <LoginDrawer
+          tenant={tenant}
+          apiUrl={apiUrl}
+          open={!!showLoginDrawer}
+          user={user}
+          loginToken={loginToken}
+          onClose={() => setShowLoginDrawer(false)}
+          onLogin={(user, token) => {
+            setUser(user);
+            setLoginToken(token);
+            setShowLoginDrawer(false);
+            setLocalConfig('loginToken', token);
+          }}
+          onLogout={() => {
+            if (!loginToken) return;
+
+            client.backend.userLogout(loginToken).then(() => {
+              setShowLoginDrawer(false);
+              setUser(undefined);
+              setLoginToken(undefined);
+              setLocalConfig('loginToken', undefined);
+            });
+          }}
+        />
+      )}
     </div>
   );
 };