@incodetech/web 2.0.0-alpha.1

package/src/permissions/deniedInstructions.tsx

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,37 @@
+@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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,246 @@
+/**
+ * @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');