@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/__snapshots__/index.test.tsx.snap

@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders client 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with all the props 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with audio disabled 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with whiteListedDomains on allowed domains 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;
-
-exports[`renders client with whiteListedDomains on not allowed domains 1`] = `
-<div>
-  <div
-    id="_rht_toaster"
-    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
-  />
-  <div
-    style="display: flex; align-items: center; justify-content: center;"
-  >
-    <p
-      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
-    >
-      loading
-      ...
-    </p>
-  </div>
-</div>
-`;

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -1,95 +0,0 @@
-/* Above website assistant and other fixed UI (same max z-index so modal stacks on top by DOM order) */
-.age-verification-modal {
-    z-index: 2147483647;
-}
-
-.age-verification-modal,
-.age-verification-modal * {
-    box-sizing: border-box;
-}
-
-.age-verification-form {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: center;
-}
-/* 
-@media (min-width: 640px) {
-    .age-verification-form {
-        min-width: 600px;
-    }
-} */
-
-.age-verification-form fieldset {
-    padding-right: 0;
-    padding-left: 0;
-    border: 0;
-}
-
-.age-verification-form .form-item {
-    width: 100%;
-    text-align: center;
-}
-
-.age-verification-form .form-item.submit {
-    margin-top: 1.5rem;
-    text-align: center;
-}
-
-.age-verification-form .form-item input {
-    color: #000;
-}
-
-.age-verification-form .form-item-help {
-    padding-bottom: 0.25rem;
-    margin: 1.5rem 0 1rem;
-    opacity: 0.5;
-    text-align: left;
-}
-
-.age-verification-form .form-item-error {
-    padding-bottom: 0.25rem;
-    margin: 1.5rem 0 1rem;
-    color: var(--memori-error-color);
-}
-
-button.age-verification-submit {
-   position: relative;
-    overflow: hidden;
-    width: 100%;
-    min-width: 220px;
-    max-width: 220px;
-    min-height: 42px;
-    padding: 1rem 2rem;
-    border: none;
-    border-radius: 12px;
-    border-radius: 8px;
-    margin-top: 1rem;
-    background: var(--memori-primary);
-    color: white;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-button.age-verification-submit::before {
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    content: '';
-    transition: left 0.5s ease;
-}
-
-button.age-verification-submit:hover::before {
-    left: 100%;
-}
-
-
-button.age-verification-submit:active {
-    transform: translateY(0);
-}

package/src/components/AgeVerificationModal/AgeVerificationModal.stories.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import AgeVerificationModal, { Props } from './AgeVerificationModal';
-
-import './AgeVerificationModal.css';
-
-const meta: Meta = {
-  title: 'AgeVerificationModal',
-  component: AgeVerificationModal,
-  parameters: {
-    controls: { expanded: true },
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <AgeVerificationModal {...args} />
-  </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 = {
-  visible: true,
-  onClose: console.log,
-  minAge: 0,
-};
-
-export const Min14yo = Template.bind({});
-Min14yo.args = {
-  visible: true,
-  onClose: console.log,
-  minAge: 14,
-};
-
-export const Min18yo = Template.bind({});
-Min18yo.args = {
-  visible: true,
-  onClose: console.log,
-  minAge: 18,
-};

package/src/components/AgeVerificationModal/AgeVerificationModal.test.tsx

@@ -1,33 +0,0 @@
-import { render } from '@testing-library/react';
-import AgeVerificationModal from './AgeVerificationModal';
-
-beforeEach(() => {
-  // @ts-ignore
-  window.IntersectionObserver = jest.fn(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-    takeRecords: jest.fn(),
-  }));
-});
-
-it('renders AgeVerificationModal unchanged', () => {
-  const { container } = render(
-    <AgeVerificationModal onClose={jest.fn()} minAge={0} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders AgeVerificationModal visible unchanged', () => {
-  const { container } = render(
-    <AgeVerificationModal visible onClose={jest.fn()} minAge={14} />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders AgeVerificationModal with minAge unchanged', () => {
-  const { container } = render(
-    <AgeVerificationModal visible onClose={jest.fn()} minAge={18} />
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -1,99 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import toast from 'react-hot-toast';
-import Button from '../ui/Button';
-import Modal from '../ui/Modal';
-import { DateTime } from 'luxon';
-import DateSelector from '../DateSelector/DateSelector';
-import { useCallback, useState } from 'react';
-
-export interface Props {
-  visible?: boolean;
-  onClose: (birthDate?: string) => void;
-  minAge: number;
-}
-
-const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
-  const { t } = useTranslation();
-
-  const [birthDate, setBirthDate] = useState<DateTime>();
-  const [error, setError] = useState<string>();
-  const [submitting, setSubmitting] = useState<boolean>(false);
-
-  const onSubmit = useCallback(() => {
-    setSubmitting(true);
-
-    if (!birthDate) {
-      toast.error(t('requiredField'));
-      setError(t('requiredField') || 'Required field');
-      setSubmitting(false);
-      return;
-    }
-
-    let age = DateTime.now().diff(birthDate, 'years').years;
-    if (age < minAge) {
-      toast.error(t('underageTwinSession', { age: minAge }));
-      setError(
-        t('underageTwinSession', { age: minAge }) ||
-          `You must be at least ${minAge} years old to interact with this Agent`
-      );
-      setSubmitting(false);
-      return;
-    }
-
-    onClose(birthDate.toJSDate().toISOString());
-  }, [birthDate, minAge, onClose, t]);
-
-  const handleDateChange = useCallback((date: DateTime | undefined) => {
-    setBirthDate(date);
-  }, []);
-
-  return (
-    <Modal
-      open={visible}
-      width="600px"
-      widthMd="600px"
-      title={t('ageVerification')}
-      className="age-verification-modal"
-      closable
-      onClose={() => onClose()}
-    >
-      <p>{t('ageVerificationText', { minAge })}</p>
-
-      <form
-        className="age-verification-form"
-        onSubmit={e => {
-          e.preventDefault();
-          onSubmit();
-        }}
-      >
-        <div className="form-item">
-          <fieldset name="birthDate">
-            <legend className="sr-only">{t('birthDate')}</legend>
-
-            <DateSelector
-              minAge={minAge}
-              onChange={handleDateChange}
-            />
-
-            <p className="form-item-help">{t('birthDateHelper')}</p>
-
-            {error && <p className="form-item-error">{error}</p>}
-          </fieldset>
-        </div>
-        <div className="form-item form-submit">
-          <Button
-            primary
-            htmlType="submit"
-            className="age-verification-submit"
-            loading={submitting}
-            disabled={!birthDate}
-          >
-            {t('confirm')}
-          </Button>
-        </div>
-      </form>
-    </Modal>
-  );
-};
-
-export default AgeVerificationModal;

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

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders AgeVerificationModal unchanged 1`] = `<div />`;
-
-exports[`renders AgeVerificationModal visible 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 AgeVerificationModal with minAge 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/Auth/Auth.css

@@ -1,57 +0,0 @@
-.memori-auth-widget--form fieldset {
-    padding: 0;
-    border: 0;
-    margin: 0 0 1em;
-}
-
-.memori-auth-widget--form hr {
-    border-top: 0;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.memori-auth-widget--form label {
-    display: flex;
-    flex-direction: column;
-}
-
-input.memori-auth-widget--input {
-    min-height: 2.5rem;
-    border: 1px solid #e0e0e0;
-    border-radius: 0.375rem;
-    appearance: none;
-    background: inherit;
-    font-size: 1rem;
-    outline: transparent solid 2px;
-    outline-offset: 2px;
-    padding-inline-end: 1rem;
-    padding-inline-start: 1rem;
-    transition-duration: 0.2s;
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-}
-
-input.memori-auth-widget--input::placeholder {
-    color: #bdbdbd;
-}
-
-input.memori-auth-widget--input:hover {
-    border-color: #c0c0c0;
-}
-
-input.memori-auth-widget--input:focus {
-    border-color: var(--memori-primary);
-}
-
-.memori-auth-widget--token {
-    display: block;
-    margin-bottom: 0.5rem;
-}
-
-.memori-auth-widget--error {
-    padding: 1rem 1.5rem;
-    border: 1px solid currentColor;
-    border-radius: 10px;
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-    background-color: rgba(255, 235, 238, 0.5);
-    color: #f44336;
-}

package/src/components/Auth/Auth.stories.tsx

@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
-import AuthWidget, { Props } from './Auth';
-
-import './Auth.css';
-
-const meta: Meta = {
-  title: 'Auth Widget',
-  component: AuthWidget,
-  argTypes: {
-    pwdOrTokens: {
-      control: {
-        type: 'select',
-        options: ['password', 'tokens'],
-      },
-    },
-    showTokens: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [pwdOrTokens, setPwdOrTokens] = useState<null | 'password' | 'tokens'>(
-    args.pwdOrTokens as 'password' | 'tokens' | null
-  );
-
-  return (
-    <I18nWrapper>
-      <AuthWidget
-        {...args}
-        pwdOrTokens={pwdOrTokens}
-        setPwdOrTokens={setPwdOrTokens}
-      />
-    </I18nWrapper>
-  );
-};
-
-const TemplateWithModal: Story<Props> = args => {
-  const [pwdOrTokens, setPwdOrTokens] = useState<null | 'password' | 'tokens'>(
-    args.pwdOrTokens as 'password' | 'tokens' | null
-  );
-
-  return (
-    <I18nWrapper>
-      <AuthWidget
-        {...args}
-        withModal
-        pwdOrTokens={pwdOrTokens}
-        setPwdOrTokens={setPwdOrTokens}
-      />
-    </I18nWrapper>
-  );
-};
-
-export const Password = Template.bind({});
-Password.args = {
-  pwdOrTokens: 'password',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: false,
-};
-
-export const WithTokens = Template.bind({});
-WithTokens.args = {
-  pwdOrTokens: 'password',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: true,
-};
-
-export const Tokens = Template.bind({});
-Tokens.args = {
-  pwdOrTokens: 'tokens',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: true,
-};
-
-export const WithModal = TemplateWithModal.bind({});
-WithModal.args = {
-  pwdOrTokens: 'password',
-  minimumNumberOfRecoveryTokens: 2,
-  showTokens: true,
-};

package/src/components/Auth/Auth.test.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Auth from './Auth';
-
-it('renders Auth unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="password"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={false}
-      onFinish={() => Promise.resolve()}
-      withModal={false}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Auth with tokens unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="password"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={true}
-      onFinish={() => Promise.resolve()}
-      withModal={false}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Auth on tokens unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="tokens"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={true}
-      onFinish={() => Promise.resolve()}
-      withModal={false}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Auth with modal unchanged', () => {
-  const { container } = render(
-    <Auth
-      pwdOrTokens="password"
-      setPwdOrTokens={() => {}}
-      minimumNumberOfRecoveryTokens={2}
-      showTokens={true}
-      onFinish={() => Promise.resolve()}
-      withModal={true}
-      openModal
-    />
-  );
-  expect(container).toMatchSnapshot();
-});