import * as React from "react"; import { TutorialStepperComplianceKycVerificationEight } from "@/registry/tutorial-stepper-compliance-kyc-verification-eight/tutorial-stepper-compliance-kyc-verification-eight"; import { useToast } from "@/hooks/use-toast"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; export function TutorialStepperComplianceKycVerificationEightDemo() { const { toast } = useToast(); const steps = [ { id: "identity", title: "Identity Verification", instructions: (

Please upload a government-issued ID to verify your identity. All documents are encrypted and processed securely.

), requirements: [ { id: "id-govt", name: "Government ID", description: "Valid passport, driver's license, or national ID card", acceptedFormats: [".pdf", ".jpg", ".png"], maxSize: "10MB", }, { id: "id-selfie", name: "Selfie", description: "Clear photo of your face holding your ID", acceptedFormats: [".jpg", ".png"], maxSize: "5MB", }, ], uploads: [ { id: "id-govt-1", name: "passport.pdf", status: "approved" as const, uploadDate: "2024-01-15", }, { id: "id-selfie-1", name: "selfie.jpg", status: "review" as const, uploadDate: "2024-01-15", }, ], }, { id: "address", title: "Address Verification", instructions: (

Upload a recent utility bill or bank statement showing your current address.

), requirements: [ { id: "addr-proof", name: "Proof of Address", description: "Utility bill, bank statement, or lease agreement (less than 3 months old)", acceptedFormats: [".pdf", ".jpg", ".png"], maxSize: "10MB", }, ], uploads: [], }, { id: "business", title: "Business Documents", instructions: (

For business accounts, please provide company registration documents.

), requirements: [ { id: "biz-reg", name: "Business Registration", description: "Certificate of incorporation or business license", acceptedFormats: [".pdf"], maxSize: "10MB", }, { id: "biz-tax", name: "Tax ID", description: "EIN or Tax identification number document", acceptedFormats: [".pdf", ".jpg", ".png"], maxSize: "5MB", }, ], uploads: [ { id: "biz-reg-1", name: "incorporation.pdf", status: "rejected" as const, uploadDate: "2024-01-14", feedback: "Document is expired. Please upload a current certificate.", }, ], }, ]; const supportOptions = [ { type: "chat" as const, label: "Chat with Compliance Officer", action: () => toast({ title: "Opening chat...", description: "Connecting you with our team", }), }, { type: "email" as const, label: "Email Support", action: () => toast({ title: "Email", description: "compliance@example.com" }), }, ]; const handleFileUpload = ( stepId: string, requirementId: string, file: File, ) => { toast({ title: "Uploading...", description: `${file.name} is being uploaded and scanned`, }); }; return (

KYC Verification

Complete your identity verification to access all features

toast({ title: "Submitted!", description: "Your documents are under review", }) } />

); } export default TutorialStepperComplianceKycVerificationEightDemo;

Simple