@incodetech/web 2.0.0-alpha.1

package/src/selfie/styles.css

@@ -0,0 +1 @@
+@import "../styles/tailwind.css";

package/src/selfie/tutorial.test.tsx

@@ -0,0 +1,200 @@
+import type { SelfieManager } from '@incodetech/core/selfie';
+import { render, screen, waitFor } from '@testing-library/preact';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Tutorial } from './tutorial';
+
+const mockAnimationData = {
+  v: '5.5.7',
+  fr: 60,
+  ip: 0,
+  op: 240,
+  w: 296,
+  h: 296,
+};
+
+vi.mock('@/i18n', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    ready: true,
+  }),
+}));
+
+vi.mock('./selfieTutorial.json', () => ({
+  default: mockAnimationData,
+}));
+
+vi.mock('@/shared/baseTutorial/baseTutorial', () => ({
+  default: ({
+    title,
+    subtitle,
+    buttonText,
+    disclaimerText,
+    onContinue,
+    isLoading,
+    animationData,
+  }: {
+    title: string;
+    subtitle: string;
+    buttonText: string;
+    disclaimerText: string;
+    onContinue: () => void;
+    isLoading?: boolean;
+    animationData: unknown;
+  }) => (
+    <div
+      data-testid="base-tutorial"
+      data-is-loading={isLoading}
+      data-has-animation={!!animationData}
+    >
+      <div data-testid="title">{title}</div>
+      <div data-testid="subtitle">{subtitle}</div>
+      <div data-testid="button-text">{buttonText}</div>
+      <div data-testid="disclaimer">{disclaimerText}</div>
+      <button type="button" onClick={onContinue} data-testid="continue-button">
+        {buttonText}
+      </button>
+    </div>
+  ),
+}));
+
+describe('Tutorial', () => {
+  const mockNextStep = vi.fn();
+  const mockManager = {
+    nextStep: mockNextStep,
+  } as unknown as SelfieManager;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('returns null when animationData is not loaded', async () => {
+      vi.resetModules();
+      vi.doUnmock('./selfieTutorial.json');
+      let resolveAnimation:
+        | ((value: typeof mockAnimationData) => void)
+        | undefined;
+      const animationPromise = new Promise<typeof mockAnimationData>(
+        (resolve) => {
+          resolveAnimation = resolve;
+        },
+      );
+      vi.doMock('./selfieTutorial.json', () => ({
+        default: animationPromise,
+      }));
+      const { Tutorial: TutorialComponent } = await import('./tutorial');
+      const { container } = render(<TutorialComponent manager={mockManager} />);
+      expect(container.firstChild).toBeNull();
+      if (resolveAnimation) {
+        resolveAnimation(mockAnimationData);
+      }
+      await waitFor(
+        () => {
+          expect(screen.getByTestId('base-tutorial')).toBeTruthy();
+        },
+        { timeout: 1000 },
+      );
+    });
+
+    it('renders BaseTutorial component', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('base-tutorial')).toBeTruthy();
+      });
+    });
+
+    it('passes animation data to BaseTutorial', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('base-tutorial').dataset.hasAnimation).toBe(
+          'true',
+        );
+      });
+    });
+  });
+
+  describe('translations', () => {
+    it('passes correct title translation key', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('title').textContent).toBe(
+          'face.tutorial.title',
+        );
+      });
+    });
+
+    it('passes correct subtitle translation key', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('subtitle').textContent).toBe(
+          'face.tutorial.subtitle',
+        );
+      });
+    });
+
+    it('passes correct button text translation key', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('button-text').textContent).toBe(
+          'face.tutorial.startCapture',
+        );
+      });
+    });
+
+    it('passes correct disclaimer translation key', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('disclaimer').textContent).toBe(
+          'face.tutorial.autoCapture',
+        );
+      });
+    });
+  });
+
+  describe('onContinue callback', () => {
+    it('calls manager.nextStep when button is clicked', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('continue-button')).toBeTruthy();
+      });
+      screen.getByTestId('continue-button').click();
+      expect(mockNextStep).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls manager.nextStep multiple times on multiple clicks', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('continue-button')).toBeTruthy();
+      });
+      const button = screen.getByTestId('continue-button');
+      button.click();
+      button.click();
+      expect(mockNextStep).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('isLoading prop', () => {
+    it('passes isLoading=false by default', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('base-tutorial').dataset.isLoading).toBe(
+          'false',
+        );
+      });
+    });
+
+    it('passes isLoading=true after button click', async () => {
+      render(<Tutorial manager={mockManager} />);
+      await waitFor(() => {
+        expect(screen.getByTestId('continue-button')).toBeTruthy();
+      });
+      const button = screen.getByTestId('continue-button');
+      button.click();
+      await waitFor(() => {
+        expect(screen.getByTestId('base-tutorial').dataset.isLoading).toBe(
+          'true',
+        );
+      });
+    });
+  });
+});

package/src/selfie/tutorial.tsx

@@ -0,0 +1,43 @@
+import type { SelfieManager } from '@incodetech/core/selfie';
+import { useEffect, useState } from 'preact/hooks';
+import { useTranslation } from '@/i18n';
+import BaseTutorial from '@/shared/baseTutorial/baseTutorial';
+import type { LottieAnimationData } from '@/shared/lottie/lottie';
+
+type TutorialProps = {
+  manager: SelfieManager;
+};
+
+export const Tutorial = ({ manager }: TutorialProps) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [animationData, setAnimationData] =
+    useState<LottieAnimationData | null>(null);
+
+  useEffect(() => {
+    import('./selfieTutorial.json').then((module) => {
+      setAnimationData(module.default);
+    });
+  }, []);
+
+  const handleContinue = () => {
+    setIsLoading(true);
+    manager.nextStep();
+  };
+
+  if (!animationData) {
+    return null;
+  }
+
+  return (
+    <BaseTutorial
+      animationData={animationData}
+      title={t('face.tutorial.title')}
+      subtitle={t('face.tutorial.subtitle')}
+      onContinue={handleContinue}
+      buttonText={t('face.tutorial.startCapture')}
+      disclaimerText={t('face.tutorial.autoCapture')}
+      isLoading={isLoading}
+    />
+  );
+};

package/src/setup.ts

@@ -0,0 +1,33 @@
+import type { WasmConfig } from '@incodetech/core';
+import { setup as coreSetup } from '@incodetech/core';
+import { createI18n, type I18nOptions, setI18nInstance } from './i18n';
+import type { UiConfig } from './shared/uiConfig/uiConfig';
+import { setUiConfig } from './shared/uiConfig/uiConfig';
+
+type SetupOptions = {
+  apiURL: string;
+  token: string;
+  customHeaders?: Record<string, string>;
+  timeout?: number;
+  wasm?: WasmConfig;
+  i18n?: I18nOptions;
+  uiConfig?: UiConfig;
+};
+
+export async function setup({
+  apiURL,
+  token,
+  customHeaders,
+  timeout,
+  wasm,
+  i18n,
+  uiConfig,
+}: SetupOptions): Promise<void> {
+  if (uiConfig) {
+    setUiConfig(uiConfig);
+  }
+  await coreSetup({ apiURL, token, customHeaders, timeout, wasm });
+
+  const i18nInstance = createI18n(i18n);
+  setI18nInstance(i18nInstance);
+}

package/src/shared/baseTutorial/baseTutorial.css

@@ -0,0 +1,21 @@
+@reference "../../styles/tailwind.css";
+
+.IncodeBaseTutorialContainer {
+  @apply flex flex-col justify-between flex-1 m-auto;
+}
+
+.IncodeBaseTutorialAnimationContainer {
+  @apply h-full px-24 m-auto max-w-[400px];
+}
+
+.IncodeBaseTutorialDisclaimer {
+  @apply text-base text-center text-text-body-secondary leading-[114%] font-medium tracking-[-0.5px] text-18 py-12;
+}
+
+.IncodeBaseTutorialButtonContainer {
+  @apply px-8 py-16 m-auto;
+}
+
+.IncodeBaseTutorialAnimation {
+  @apply h-full;
+}

package/src/shared/baseTutorial/baseTutorial.test.tsx

@@ -0,0 +1,184 @@
+import { render, screen } from '@testing-library/preact';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import BaseTutorial from './baseTutorial';
+import { getCssVariableAsHex, replaceLottieColor } from './replaceBaseTutorial';
+
+vi.mock('./replaceBaseTutorial', () => ({
+  getCssVariableAsHex: vi.fn(() => '#006aff'),
+  replaceLottieColor: vi.fn((json) => json),
+}));
+
+vi.mock('../lottie/lottie', () => ({
+  Lottie: ({ animationData }: { animationData: unknown }) => (
+    <div data-testid="lottie-animation">{JSON.stringify(animationData)}</div>
+  ),
+}));
+
+const mockAnimationData = {
+  fr: 30,
+  v: '5.5.7',
+  ip: 0,
+  op: 60,
+  w: 100,
+  h: 100,
+};
+
+describe('BaseTutorial', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders title and subtitle', () => {
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Test Title"
+        subtitle="Test Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Test disclaimer"
+      />,
+    );
+
+    expect(screen.getByText('Test Title')).toBeTruthy();
+    expect(screen.getByText('Test Subtitle')).toBeTruthy();
+  });
+
+  it('renders disclaimer text', () => {
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Test disclaimer text"
+      />,
+    );
+
+    expect(screen.getByText('Test disclaimer text')).toBeTruthy();
+  });
+
+  it('renders button with correct text', () => {
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Start Now"
+        disclaimerText="Disclaimer"
+      />,
+    );
+
+    expect(screen.getByText('Start Now')).toBeTruthy();
+  });
+
+  it('calls onContinue when button is clicked', () => {
+    const handleContinue = vi.fn();
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={handleContinue}
+        buttonText="Continue"
+        disclaimerText="Disclaimer"
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    button.click();
+    expect(handleContinue).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders Lottie animation', () => {
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Disclaimer"
+      />,
+    );
+
+    expect(screen.getByTestId('lottie-animation')).toBeTruthy();
+  });
+
+  it('shows loading state on button when isLoading is true', () => {
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Disclaimer"
+        isLoading
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button.hasAttribute('disabled')).toBe(true);
+    expect(button.classList.contains('IncodeButtonLoading')).toBe(true);
+  });
+
+  it('does not show loading state when isLoading is false', () => {
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Disclaimer"
+        isLoading={false}
+      />,
+    );
+
+    const button = screen.getByRole('button');
+    expect(button.classList.contains('IncodeButtonLoading')).toBe(false);
+  });
+
+  it('uses default brand color when CSS variable is not available', () => {
+    vi.mocked(getCssVariableAsHex).mockReturnValue(null);
+
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Disclaimer"
+      />,
+    );
+
+    expect(replaceLottieColor).toHaveBeenCalledWith(
+      mockAnimationData,
+      '#006aff',
+    );
+  });
+
+  it('uses CSS variable color when available', () => {
+    vi.mocked(getCssVariableAsHex).mockReturnValue('#ff0000');
+
+    render(
+      <BaseTutorial
+        animationData={mockAnimationData}
+        title="Title"
+        subtitle="Subtitle"
+        onContinue={() => {}}
+        buttonText="Continue"
+        disclaimerText="Disclaimer"
+      />,
+    );
+
+    expect(replaceLottieColor).toHaveBeenCalledWith(
+      mockAnimationData,
+      '#ff0000',
+    );
+  });
+});

package/src/shared/baseTutorial/baseTutorial.tsx

@@ -0,0 +1,55 @@
+import { Button } from '../button/button';
+import { Lottie, type LottieAnimationData } from '../lottie/lottie';
+import { Page } from '../page/page';
+import './baseTutorial.css';
+import { getCssVariableAsHex, replaceLottieColor } from './replaceBaseTutorial';
+
+type BaseTutorialProps = {
+  animationData: LottieAnimationData;
+  title: string;
+  subtitle: string;
+  onContinue: () => void;
+  buttonText: string;
+  disclaimerText: string;
+  isLoading?: boolean;
+};
+const BaseTutorial = ({
+  animationData,
+  title,
+  subtitle,
+  onContinue,
+  buttonText,
+  disclaimerText,
+  isLoading,
+}: BaseTutorialProps) => {
+  const brandColor = getCssVariableAsHex('--surface-brand-500');
+  return (
+    <Page className="IncodeTutorialPage" title={title} subtitle={subtitle}>
+      <div class="IncodeBaseTutorialContainer">
+        <div class="IncodeBaseTutorialAnimationContainer">
+          <Lottie
+            animationData={replaceLottieColor(
+              animationData,
+              brandColor ?? '#006aff',
+            )}
+            className="IncodeBaseTutorialAnimation"
+          />
+        </div>
+      </div>
+      <div>
+        <p class="IncodeBaseTutorialDisclaimer">{disclaimerText}</p>
+        <div class="IncodeBaseTutorialButtonContainer">
+          <Button
+            onClick={onContinue}
+            class="max-w-[420px] m-auto"
+            isLoading={isLoading}
+          >
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+    </Page>
+  );
+};
+
+export default BaseTutorial;