@incodetech/web 2.0.0-alpha.2 → 2.0.0-alpha.4

package/src/permissions/deniedInstructions.tsx

@@ -1,19 +0,0 @@
-import { getDeviceClass } from '@incodetech/core';
-import type { FC } from 'preact/compat';
-import { DeniedAndroid } from './deniedAndroid';
-import { DeniedDesktop } from './deniedDesktop';
-import { DeniedIOS } from './deniedIOS';
-
-export const DeniedInstructions: FC = () => {
-  const deviceClass = getDeviceClass();
-
-  if (deviceClass === 'ios') {
-    return <DeniedIOS />;
-  }
-
-  if (deviceClass === 'android') {
-    return <DeniedAndroid />;
-  }
-
-  return <DeniedDesktop />;
-};

package/src/permissions/iconWrapper.css

@@ -1,9 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeIconWrapper {
-  @apply flex items-center justify-center w-[38px] h-[38px] min-w-[38px] min-h-[38px] aspect-square;
-}
-
-.IncodeIconWrapperImage {
-  @apply w-full h-full;
-}

package/src/permissions/iconWrapper.tsx

@@ -1,15 +0,0 @@
-import type { FC } from 'preact/compat';
-import './iconWrapper.css';
-
-type IconWrapperProps = {
-  icon: string;
-  title: string;
-};
-
-export const IconWrapper: FC<IconWrapperProps> = ({ icon, title }) => {
-  return (
-    <div class="IncodeIconWrapper">
-      <img src={icon} alt={title} class="IncodeIconWrapperImage" />
-    </div>
-  );
-};

package/src/permissions/learnMore.css

@@ -1,37 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeLearnMoreContainer {
-  @apply flex flex-col items-center justify-center;
-}
-
-.IncodeLearnMoreImage {
-  @apply w-32 h-32 aspect-square;
-}
-
-.IncodeLearnMoreTitle {
-  @apply text-20 text-center font-bold leading-[114%] tracking-[-1px] text-text-body-primary;
-}
-
-.IncodeLearnMoreInstructions {
-  @apply flex flex-col items-center gap-24;
-}
-
-.IncodeLearnMoreInstruction {
-  @apply flex items-center gap-12 w-full;
-}
-
-.IncodeLearnMoreInstructionIcon {
-  @apply flex w-32 h-32 aspect-square shrink-0;
-}
-
-.IncodeLearnMoreInstructionIconImage {
-  @apply w-full h-full;
-}
-
-.IncodeLearnMoreInstructionText {
-  @apply text-18 font-medium leading-[114%] tracking-[-0.5px] text-text-body-primary;
-}
-
-.IncodeLearnMoreActions {
-  @apply flex flex-col items-center w-full mt-auto py-16;
-}

package/src/permissions/learnMore.tsx

@@ -1,85 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n/useTranslation';
-import { Button } from '@/shared/button/button';
-import { Page } from '@/shared/page/page';
-import { Spacer } from '@/shared/spacer/spacer';
-import './learnMore.css';
-import bankCardIcon from './assets/bank-card-icon.svg';
-import cameraIcon from './assets/camera-icon.svg';
-import checkIcon from './assets/check-icon.svg';
-import passwordIcon from './assets/password-icon.svg';
-import warningIcon from './assets/warning-icon.svg';
-
-type LearnMoreProps = {
-  onAllowPermissions: () => void;
-  onQuitProcess: () => void;
-};
-
-const learnMoreInstructions = [
-  {
-    icon: cameraIcon,
-    textKey: 'idv2.permissions.learnMorePage.instructions.1',
-  },
-  {
-    icon: bankCardIcon,
-    textKey: 'idv2.permissions.learnMorePage.instructions.2',
-  },
-  {
-    icon: passwordIcon,
-    textKey: 'idv2.permissions.learnMorePage.instructions.3',
-  },
-  {
-    icon: checkIcon,
-    textKey: 'idv2.permissions.learnMorePage.instructions.4',
-  },
-];
-
-export const LearnMore: FC<LearnMoreProps> = ({
-  onAllowPermissions,
-  onQuitProcess,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Page className="IncodeLearnMorePage" hideHeader>
-      <Spacer size={40} />
-      <div class="IncodeLearnMoreContainer">
-        <img
-          src={warningIcon}
-          alt={t('idv2.permissions.learnMorePage.warning')}
-          class="IncodeLearnMoreImage"
-        />
-        <Spacer size={12} />
-        <p class="IncodeLearnMoreTitle">
-          {t('idv2.permissions.learnMorePage.title')}
-        </p>
-        <Spacer size={32} />
-        <div class="IncodeLearnMoreInstructions">
-          {learnMoreInstructions.map((instruction) => (
-            <div key={instruction.textKey} class="IncodeLearnMoreInstruction">
-              <div class="IncodeLearnMoreInstructionIcon">
-                <img
-                  src={instruction.icon}
-                  alt=""
-                  class="IncodeLearnMoreInstructionIconImage"
-                />
-              </div>
-              <span class="IncodeLearnMoreInstructionText">
-                {t(instruction.textKey)}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-      <div class="IncodeLearnMoreActions">
-        <Button onClick={onAllowPermissions}>
-          {t('idv2.permissions.learnMorePage.allowPermissions')}
-        </Button>
-        <Spacer size={12} />
-        <Button variant="link" onClick={onQuitProcess}>
-          {t('idv2.permissions.learnMorePage.quitProcess')}
-        </Button>
-      </div>
-    </Page>
-  );
-};

package/src/permissions/numberedStep.css

@@ -1,13 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeNumberedStep {
-  @apply flex items-center justify-center w-[46px] h-[46px] min-w-[46px] min-h-[46px] rounded-lg border-2 border-solid border-border-neutral-100;
-}
-
-.IncodeNumberedStepText {
-  @apply text-18 font-semibold text-text-body-primary;
-}
-
-.IncodeNumberedStepConnector {
-  @apply h-12 w-2 bg-border-neutral-100 ml-24;
-}

package/src/permissions/numberedStep.tsx

@@ -1,14 +0,0 @@
-import type { FC } from 'preact/compat';
-import './numberedStep.css';
-
-type NumberedStepProps = {
-  number: number;
-};
-
-export const NumberedStep: FC<NumberedStepProps> = ({ number }) => {
-  return (
-    <div class="IncodeNumberedStep">
-      <span class="IncodeNumberedStepText">{number}</span>
-    </div>
-  );
-};

package/src/permissions/permissions.css

@@ -1,13 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodePermissionsImageContainer {
-  @apply flex relative flex-col items-center;
-}
-
-.IncodePermissionsActions {
-  @apply flex flex-col items-center w-full mt-auto;
-}
-
-.IncodePermissionsActionsGap {
-  @apply flex flex-col items-center w-full mt-auto gap-12;
-}

package/src/permissions/permissions.tsx

@@ -1,68 +0,0 @@
-import type { PermissionStatus, SelfieManager } from '@incodetech/core/selfie';
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n/useTranslation';
-import { Button } from '@/shared/button/button';
-import { Page } from '@/shared/page/page';
-import { Spacer } from '@/shared/spacer/spacer';
-import permissionsImg from './assets/permissions-img.svg';
-import { Denied } from './denied';
-import { LearnMore } from './learnMore';
-import './permissions.css';
-
-type PermissionsProps = {
-  manager: SelfieManager;
-  permissionStatus: PermissionStatus;
-};
-
-export const Permissions: FC<PermissionsProps> = ({
-  manager,
-  permissionStatus,
-}) => {
-  const { t } = useTranslation();
-
-  if (permissionStatus === 'requesting') {
-    return <Page className="IncodePermissionsRequestingPage" hideHeader />;
-  }
-
-  if (permissionStatus === 'learnMore') {
-    return (
-      <LearnMore
-        onAllowPermissions={() => manager.requestPermission()}
-        onQuitProcess={() => manager.close()}
-      />
-    );
-  }
-
-  if (permissionStatus === 'denied') {
-    return <Denied onRefresh={() => window.location.reload()} />;
-  }
-
-  return (
-    <Page
-      className="IncodePermissionsPage"
-      title={t('idv2.permissions.allowPermissionsV2')}
-      subtitle={t('idv2.permissions.inOrderToCompleteTheProcess')}
-      hideHeader
-    >
-      <Spacer size={40} />
-      <div class="IncodePermissionsImageContainer">
-        <img
-          src={permissionsImg}
-          alt={t('idv2.permissions.alertAlt')}
-          class="IncodePermissionsImage"
-        />
-      </div>
-      <Spacer size={24} />
-      <div class="IncodePermissionsActions">
-        <Button onClick={() => manager.requestPermission()}>
-          {t('idv2.permissions.allowPermissions')}
-        </Button>
-        <Spacer size={12} />
-        <Button variant="link" onClick={() => manager.goToLearnMore()}>
-          {t('idv2.permissions.learnMore')}
-        </Button>
-        <Spacer size={16} />
-      </div>
-    </Page>
-  );
-};

package/src/phone/phone.tsx

@@ -1,246 +0,0 @@
-/**
- * @module @incodetech/ui/phone
- *
- * Phone verification UI component for the Incode Web SDK.
- * Provides a complete, ready-to-use phone verification experience
- * with country code selection and OTP input.
- *
- * ## UI Usage
- *
- * The Phone component can be used as a React/Preact component or as a
- * Web Component (`<incode-phone>`).
- *
- * @example React/Preact component usage
- * ```tsx
- * import { Phone } from '@incodetech/ui/phone';
- * import { setup } from '@incodetech/core';
- *
- * // Configure the SDK first
- * setup({ apiURL: 'https://api.example.com', token: 'your-token' });
- *
- * function App() {
- *   const config = {
- *     otpVerification: true,
- *     otpExpirationInMinutes: 5,
- *     prefill: false,
- *   };
- *
- *   return (
- *     <Phone
- *       config={config}
- *       onFinish={() => console.log('Phone verified!')}
- *       onError={(error) => console.error('Error:', error)}
- *     />
- *   );
- * }
- * ```
- *
- * @example Web Component usage
- * ```html
- * <!-- Include the script -->
- * <script type="module">
- *   import '@incodetech/ui/phone';
- *   import { setup } from '@incodetech/core';
- *
- *   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
- *
- *   const phone = document.querySelector('incode-phone');
- *   phone.config = {
- *     otpVerification: true,
- *     otpExpirationInMinutes: 5,
- *     prefill: false,
- *   };
- *   phone.onFinish = () => console.log('Phone verified!');
- *   phone.onError = (error) => console.error('Error:', error);
- * </script>
- *
- * <incode-phone></incode-phone>
- * ```
- *
- * ## Styling
- *
- * The component uses CSS custom properties (variables) for theming.
- * Override these variables to customize the appearance:
- *
- * ```css
- * :root {
- *   --button-primary-surface-default: #0066cc;
- *   --input-border-default: #cccccc;
- *   --text-title: #333333;
- * }
- * ```
- *
- * ## Headless Alternative
- *
- * For complete control over the UI, use the headless `createPhoneManager`
- * from `@incodetech/core/phone` instead. See the core module documentation.
- */
-import './styles.css';
-import { createPhoneManager, type PhoneConfig } from '@incodetech/core/phone';
-import type { FC } from 'preact/compat';
-import { useState } from 'preact/hooks';
-import { useManager } from '@/hooks';
-import { Button } from '../shared/button/button';
-import { IncodeComponent } from '../shared/componentRoot/incodeComponent';
-import { OtpInput } from '../shared/otpInput/otpInput';
-import { Page } from '../shared/page/page';
-import { Spacer } from '../shared/spacer/spacer';
-import {
-  type IncodeModuleProps,
-  registerIncodeModuleElement,
-} from '../shared/webComponent/incodeModule';
-import { PhoneInput } from './phoneInput';
-
-/** @internal */
-type PhoneContentProps = {
-  config: PhoneConfig;
-  onFinish?: () => void;
-  onError?: (error: string | undefined) => void;
-};
-
-const PhoneContent: FC<PhoneContentProps> = ({ config, onFinish, onError }) => {
-  const [state, manager] = useManager(() => {
-    if (!config) {
-      throw new Error('Phone config is required');
-    }
-    return createPhoneManager({ config });
-  });
-  const [isPhoneValid, setIsPhoneValid] = useState(false);
-
-  // Handle input states: idle, loadingPrefill, inputting, submitting, sendingOtp
-  const isInputState =
-    state.status === 'idle' ||
-    state.status === 'loadingPrefill' ||
-    state.status === 'inputting' ||
-    state.status === 'submitting' ||
-    state.status === 'sendingOtp';
-
-  if (isInputState) {
-    const isLoading =
-      state.status === 'idle' ||
-      state.status === 'loadingPrefill' ||
-      state.status === 'submitting' ||
-      state.status === 'sendingOtp';
-
-    const countryCode = state.status === 'inputting' ? state.countryCode : 'US';
-    const phonePrefix = state.status === 'inputting' ? state.phonePrefix : '+1';
-    const prefilledPhone =
-      state.status === 'inputting' ? state.prefilledPhone : undefined;
-    const phoneError =
-      state.status === 'inputting' ? state.phoneError : undefined;
-
-    return (
-      <Page
-        className="IncodePhonePage"
-        title="Verify Phone"
-        subtitle={
-          config.otpVerification
-            ? 'We will send you a verification code'
-            : undefined
-        }
-      >
-        <PhoneInput
-          countryCode={countryCode}
-          phonePrefix={phonePrefix}
-          prefilledPhone={prefilledPhone}
-          phoneError={phoneError}
-          optinEnabled={config.optinEnabled}
-          disabled={isLoading}
-          onPhoneChange={(phone, isValid) => {
-            manager.setPhoneNumber(phone, isValid);
-            setIsPhoneValid(isValid);
-          }}
-          onOptInChange={(granted) => manager.setOptInGranted(granted)}
-        />
-        <Spacer />
-        <Button
-          onClick={() => manager.submit()}
-          disabled={!isPhoneValid}
-          isLoading={isLoading}
-          data-testid="phone-submit"
-        >
-          Continue
-        </Button>
-      </Page>
-    );
-  }
-
-  if (
-    state.status === 'awaitingOtp' ||
-    state.status === 'verifyingOtp' ||
-    state.status === 'otpError'
-  ) {
-    const isVerifying = state.status === 'verifyingOtp';
-
-    return (
-      <Page
-        className="IncodePhonePage IncodePhoneOtpPage"
-        title="Enter Verification Code"
-      >
-        <OtpInput
-          resendTimer={state.status === 'awaitingOtp' ? state.resendTimer : 0}
-          canResend={state.status === 'awaitingOtp' ? state.canResend : false}
-          error={state.status === 'otpError' ? state.error : undefined}
-          onSubmit={(code) => manager.submitOtp(code)}
-          onResend={() => manager.resendOtp()}
-          onBack={() => manager.back()}
-          isLoading={isVerifying}
-        />
-      </Page>
-    );
-  }
-
-  if (state.status === 'success') {
-    onFinish?.();
-    return null;
-  }
-
-  if (state.status === 'error') {
-    onError?.(state.error);
-    return null;
-  }
-
-  return null;
-};
-
-/**
- * Props for the Phone component
- */
-type PhoneProps = IncodeModuleProps<PhoneConfig>;
-
-/**
- * Phone verification UI component.
- *
- * Provides a complete phone verification experience including:
- * - Country code selector with flag emojis
- * - Phone number input with validation
- * - OTP code entry with resend functionality
- * - Loading states and error handling
- *
- * @example Basic usage
- * ```tsx
- * <Phone
- *   config={{
- *     otpVerification: true,
- *     otpExpirationInMinutes: 5,
- *     prefill: false,
- *   }}
- *   onFinish={() => router.push('/next-step')}
- *   onError={(err) => toast.error(err)}
- * />
- * ```
- *
- * @see {@link createPhoneManager} for headless usage
- */
-export const Phone: FC<PhoneProps> = ({ config, onFinish, onError }) => {
-  return (
-    <IncodeComponent>
-      {config ? (
-        <PhoneContent config={config} onFinish={onFinish} onError={onError} />
-      ) : null}
-    </IncodeComponent>
-  );
-};
-
-// Register as a Web Component
-registerIncodeModuleElement(Phone, 'incode-phone');