ericlay
/
flowDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add src/components/onboarding/WarningModal.jsx

This commit is contained in:
Eric Lay 2026-03-11 08:44:16 -05:00
parent 000e0df37e
commit 4eaa962766
1 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/onboarding/WarningModal.jsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
export default function WarningModal({ open, onContinue }) {
return (
<AnimatePresence>
{open &&
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 20 }}
transition={{ type: "spring", damping: 25, stiffness: 300 }}
className="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
{/* Header */}
<div className="bg-gradient-to-r from-amber-50 to-orange-50 px-8 py-6 border-b border-amber-100">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center">
<AlertTriangle className="w-6 h-6 text-amber-600" />
</div>
<div>
<h2 className="text-xl font-bold text-gray-900">Important Before You Continue</h2>
<p className="text-sm text-gray-500 mt-0.5">Please read carefully before proceeding</p>
</div>
</div>
</div>
{/* Body */}
<div className="px-8 py-6 space-y-4">
<p className="text-gray-700 leading-relaxed">
Welcome to the PackageHub360 onboarding process. Before creating your account, please be aware of the following:
</p>
<div className="bg-gray-50 rounded-xl p-4 border border-gray-100 space-y-3">
<p className="text-sm text-gray-600 leading-relaxed">
<span className="font-semibold text-gray-800">• Account Association:</span> Your account will be permanently linked to the store information provided in your onboarding invitation.
</p>
<p className="text-sm text-gray-600 leading-relaxed">
<span className="font-semibold text-gray-800">• Stripe Setup Required:</span> You will need to complete Stripe Express onboarding to receive electronic program payouts.
</p>
<p className="text-sm text-gray-600 leading-relaxed">
<span className="font-semibold text-gray-800">• Data Accuracy:</span> Please ensure all information entered during signup is accurate and matches your business records.
</p>