@memori.ai/memori-react 1.0.0-alpha.1

package/src/components/StartPanel/StartPanel.css

@@ -0,0 +1,121 @@
+.memori--gamification-badge {
+    position: absolute;
+    right: 0.25rem;
+    bottom: -1.25rem;
+    display: flex;
+    width: 2rem;
+    height: 2rem;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid var(--ant-primary-color);
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: 0 0 5px 6px rgba(255, 255, 255, 0.5);
+}
+
+.memori--gamification-badge span {
+    font-size: 1.2rem;
+}
+
+.memori--start-panel {
+    width: 100%;
+    align-self: flex-start;
+    padding: var(--memori-inner-content-pad, 0);
+    border-radius: 10px;
+    margin-top: 2rem;
+    background-color: var(--memori-inner-bg, transparent);
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+.memori--start-panel .memori--start-panel-title {
+    color: var(--memori-text-color, var(--ant-primary-color)) !important;
+}
+
+.memori--start-panel .memori--start-panel-description {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85)) !important;
+}
+
+@media (max-width: 870px) {
+    .memori--start-panel {
+        margin-top: 1rem;
+    }
+}
+
+.memori--cover {
+    position: relative;
+    width: 100%;
+    padding-top: 31.25%;
+    border-radius: 3px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.memori--avatar {
+    position: relative;
+    z-index: 0;
+    top: -20px;
+    display: inline-flex;
+    overflow: hidden;
+    width: 60px;
+    height: 60px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-right: 10px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(50, 50, 50, 0.3);
+}
+
+
+.memori--avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.memori--title {
+    display: inline-block;
+    color: var(--ant-primary-color);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.8;
+}
+
+.memori--description,
+.memori--needsPosition {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.memori--description-text {
+    display: block;
+}
+
+.memori--translation-toggle {
+    height: auto;
+    padding-right: 0;
+    padding-left: 0;
+    font-size: 0.85em;
+}
+
+.memori--start-description {
+    margin-top: 0.5rem;
+    font-size: 0.85em;
+    opacity: 0.85;
+}
+
+.memori--language-chooser {
+    margin-bottom: 1rem;
+}
+
+.memori--language-chooser svg {
+    margin-right: 0.5rem;
+}
+
+.memori--language-chooser select,
+.memori--language-chooser .memori--select {
+    min-width: 7rem;
+    margin-left: 0.5rem;
+}

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, sessionID, integration, tenant } from '../../mocks/data';
+import StartPanel, { Props } from './StartPanel';
+
+import '../../i18n';
+
+const meta: Meta = {
+  title: 'Widget/Start panel',
+  component: StartPanel,
+  argTypes: {
+    showShare: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const integrationConfig = {
+  ...JSON.parse(integration.customData ?? '{}'),
+  avatarURL:
+    JSON.parse(integration.customData ?? '{}').avatarURL?.split('#')?.[0] +
+    '#' +
+    new Date(Date.now()).getTime(),
+};
+const integrationProperties = {
+  '--memori-chat-bubble-bg': '#fff',
+  ...(integrationConfig?.buttonBgColor
+    ? {
+        '--memori-button-bg': integrationConfig.buttonBgColor,
+        '--memori-button-hover-brightness': '1.2',
+        '--ant-primary-color': integrationConfig.buttonBgColor,
+        '--ant-primary-color-hover': integrationConfig.buttonBgColor,
+        '--ant-primary-4': integrationConfig.buttonBgColor,
+        '--ant-primary-5': integrationConfig.buttonBgColor,
+        '--ant-primary-7': integrationConfig.buttonBgColor,
+      }
+    : {
+        '--memori-button-hover-brightness': '1',
+      }),
+  ...(integrationConfig?.buttonTextColor
+    ? {
+        '--memori-button-text': integrationConfig.buttonTextColor,
+        '--ant-primary-text': integrationConfig.buttonTextColor,
+      }
+    : {}),
+  ...(integrationConfig?.blurBackground
+    ? {
+        '--memori-blur-background': '5px',
+      }
+    : {
+        '--memori-blur-background': '0px',
+      }),
+  ...(integrationConfig?.innerBgColor
+    ? {
+        '--memori-inner-bg': `rgba(${
+          integrationConfig.innerBgColor === 'dark'
+            ? '0, 0, 0'
+            : '255, 255, 255'
+        }, ${integrationConfig.innerBgAlpha ?? 0.4})`,
+        '--memori-inner-content-pad': '1.5rem',
+        '--memori-nav-bg-image': 'none',
+        '--memori-nav-bg': `rgba(${
+          integrationConfig.innerBgColor === 'dark'
+            ? '0, 0, 0'
+            : '255, 255, 255'
+        }, ${integrationConfig?.innerBgAlpha ?? 0.4})`,
+      }
+    : {
+        '--memori-inner-content-pad': '0px',
+      }),
+};
+
+const integrationStylesheet = `
+    #root {
+      ${Object.entries(integrationProperties)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('\n')}
+    }
+  `;
+
+const Template: Story<Props> = args => (
+  <div style={{ maxWidth: '600px', margin: 'auto' }}>
+    {args.integrationConfig && (
+      <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
+    )}
+    <StartPanel {...args} />
+  </div>
+);
+
+// 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 = {
+  memori,
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const WithGamificationLevel = Template.bind({});
+WithGamificationLevel.args = {
+  memori,
+  tenant,
+  gamificationLevel: {
+    points: 61,
+    pointsForCurrentBadge: 60,
+    badge: '🌍',
+  },
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const Instruct = Template.bind({});
+Instruct.args = {
+  memori,
+  tenant,
+  gamificationLevel: {
+    points: 61,
+    pointsForCurrentBadge: 60,
+    badge: '🌍',
+  },
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: true,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const PositionRequired = Template.bind({});
+PositionRequired.args = {
+  memori: {
+    ...memori,
+    needsPosition: true,
+  },
+  tenant,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: true,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};
+
+export const WithIntegration = Template.bind({});
+WithIntegration.args = {
+  memori,
+  tenant,
+  integrationConfig,
+  language: 'it',
+  userLang: 'en',
+  setUserLang: () => {},
+  openPositionDrawer: () => {},
+  instruct: false,
+  sessionId: sessionID,
+  clickedStart: false,
+  onClickStart: () => {},
+};

package/src/components/StartPanel/StartPanel.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { memori, tenant, sessionID, integration } from '../../mocks/data';
+import StartPanel from './StartPanel';
+
+it('renders StartPanel unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders StartPanel with gamification level unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      gamificationLevel={{
+        points: 61,
+        pointsForCurrentBadge: 60,
+        badge: '🌍',
+      }}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders StartPanel on instruct unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      gamificationLevel={{
+        points: 61,
+        pointsForCurrentBadge: 60,
+        badge: '🌍',
+      }}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={true}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders StartPanel with position required unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={{
+        ...memori,
+        needsPosition: true,
+      }}
+      tenant={tenant}
+      gamificationLevel={{
+        points: 61,
+        pointsForCurrentBadge: 60,
+        badge: '🌍',
+      }}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={true}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders StartPanel with integrationConfig unchanged', () => {
+  const { container } = render(
+    <StartPanel
+      memori={memori}
+      tenant={tenant}
+      integrationConfig={JSON.parse(integration.customData ?? '{}')}
+      language="it"
+      userLang="en"
+      setUserLang={() => {}}
+      openPositionDrawer={() => {}}
+      instruct={false}
+      sessionId={sessionID}
+      clickedStart={false}
+      onClickStart={() => {}}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/StartPanel/StartPanel.tsx

@@ -0,0 +1,246 @@
+import {
+  GamificationLevel,
+  Memori,
+  Tenant,
+  Venue,
+} from '@memori.ai/memori-api-client/dist/types';
+import React, { useState, useEffect } from 'react';
+import { getResourceUrl } from '../../helpers/media';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../ui/Tooltip';
+import { getTranslation } from '../../helpers/translations';
+import Button from '../ui/Button';
+import Translation from '../icons/Translation';
+import { chatLanguages } from '../../helpers/constants';
+import BlockedMemoriBadge from '../BlockedMemoriBadge/BlockedMemoriBadge';
+
+import './StartPanel.css';
+
+export interface Props {
+  memori: Memori;
+  tenant?: Tenant;
+  gamificationLevel?: GamificationLevel;
+  language?: string;
+  userLang?: string;
+  setUserLang: (lang: string) => void;
+  baseUrl?: string;
+  position?: Venue;
+  openPositionDrawer: () => void;
+  integrationConfig?: { [key: string]: any };
+  instruct?: boolean;
+  sessionId?: string;
+  clickedStart?: boolean;
+  onClickStart?: () => void;
+}
+
+const StartPanel: React.FC<Props> = ({
+  memori,
+  tenant,
+  gamificationLevel,
+  language,
+  userLang,
+  setUserLang,
+  baseUrl,
+  position,
+  openPositionDrawer,
+  integrationConfig,
+  instruct = false,
+  sessionId,
+  clickedStart,
+  onClickStart,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [translatedDescription, setTranslatedDescription] = useState(
+    memori.description
+  );
+  const [showTranslation, setShowTranslation] = useState(true);
+  const toggleTranslations = () => {
+    setShowTranslation(show => !show);
+  };
+
+  useEffect(() => {
+    if (
+      (i18n.language?.toUpperCase() ?? 'IT') !==
+        (language?.toUpperCase() ?? 'IT') &&
+      !!memori.description?.length
+    ) {
+      getTranslation(
+        memori.description,
+        i18n.language?.toUpperCase() ?? 'IT',
+        language,
+        baseUrl
+      )
+        .then(value => {
+          setTranslatedDescription(value.text);
+        })
+        .catch(console.error);
+    }
+  }, [i18n.language, language, memori.description, baseUrl]);
+
+  return (
+    <div className="memori--start-panel">
+      <div
+        className="memori--cover"
+        style={{
+          backgroundImage: `url("${getResourceUrl({
+            type: 'cover',
+            tenantID: tenant?.id,
+            resourceURI: memori.coverURL,
+            baseURL: baseUrl,
+          })}"), url("${getResourceUrl({
+            type: 'cover',
+            tenantID: tenant?.id,
+            baseURL: baseUrl,
+          })}")`,
+        }}
+      >
+        {!!gamificationLevel?.badge?.length && (
+          <div className="memori--gamification-badge">
+            <Tooltip
+              alignLeft
+              content={`${t('gamification.level')} ${
+                gamificationLevel.badge
+              }, ${gamificationLevel.points} ${t('gamification.points')}`}
+            >
+              <span
+                aria-label={`${t('gamification.level')} ${
+                  gamificationLevel.badge
+                }, ${gamificationLevel.points} ${t('gamification.points')}`}
+              >
+                {gamificationLevel.badge}
+              </span>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+      <picture className="memori--avatar">
+        <source
+          src={
+            memori.avatarURL ??
+            getResourceUrl({
+              type: 'avatar',
+              tenantID: tenant?.id,
+              resourceURI: memori.avatarURL,
+              baseURL: baseUrl,
+            })
+          }
+        />
+        <img
+          alt={memori.name}
+          src={
+            memori.avatarURL && memori.avatarURL.length > 0
+              ? getResourceUrl({
+                  type: 'avatar',
+                  tenantID: tenant?.id,
+                  resourceURI: memori.avatarURL,
+                  baseURL: baseUrl,
+                })
+              : getResourceUrl({
+                  type: 'avatar',
+                  tenantID: tenant?.id,
+                  baseURL: baseUrl,
+                })
+          }
+        />
+      </picture>
+      <h2 className="memori--title">{memori.name}</h2>
+      {memori.needsPosition && !position && (
+        <div className="memori--needsPosition">
+          <p>{t('write_and_speak.requirePosition')}</p>
+          <Button
+            primary
+            onClick={() => openPositionDrawer()}
+            className="memori--start-button"
+          >
+            {t('widget.position')}
+          </Button>
+        </div>
+      )}
+      {((memori.needsPosition && position) || !memori.needsPosition) && (
+        <div className="memori--description">
+          <p>
+            <span className="memori--description-text">
+              {translatedDescription && showTranslation
+                ? translatedDescription
+                : memori.description}
+            </span>
+
+            {translatedDescription !== memori.description && (
+              <Button
+                ghost
+                className="memori--translation-toggle"
+                icon={<Translation />}
+                onClick={() => toggleTranslations()}
+              >
+                {showTranslation
+                  ? t('showOriginalText')
+                  : t('showTranslatedText')}
+              </Button>
+            )}
+          </p>
+
+          {integrationConfig?.multilanguage && !instruct && (
+            <div className="memori--language-chooser">
+              <label id="user-lang-pref-label" htmlFor="user-lang-pref">
+                {t('write_and_speak.iWantToTalkToIn', {
+                  name: memori.name,
+                })}
+              </label>
+              <select
+                id="user-lang-pref"
+                value={(userLang ?? i18n.language).toUpperCase()}
+                aria-labelledby="user-lang-pref-label"
+                onChange={e => {
+                  setUserLang(e.target.value);
+                }}
+              >
+                {chatLanguages.map(lang => (
+                  <option
+                    key={lang.value}
+                    value={lang.value}
+                    aria-label={lang.label}
+                  >
+                    {lang.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          <Button
+            primary
+            disabled={
+              (!sessionId && memori.privacyType === 'PUBLIC') ||
+              (!!memori.blockedUntil && !memori.isGiver)
+            }
+            loading={clickedStart}
+            onClick={onClickStart}
+            className="memori--start-button"
+          >
+            {t(
+              `write_and_speak.${!instruct ? 'tryMeButton' : 'instructButton'}`
+            )}
+          </Button>
+
+          <p className="memori--start-description">
+            {instruct
+              ? t('write_and_speak.pageInstructExplanation')
+              : t('write_and_speak.pageTryMeExplanation')}
+          </p>
+
+          {!!memori.blockedUntil && (
+            <BlockedMemoriBadge
+              memoriName={memori.name}
+              blockedUntil={memori.blockedUntil}
+              showGiverInfo={memori.isGiver}
+              showTitle
+              marginLeft
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StartPanel;